Webサイトでおしゃれなフォントを活用する③- 新米Web担のためのホームページの作り方| 番外編

今回は,Webフォントのご紹介をしたいと思います。

先回の記事でも取り上げたように,Webサイト上でのフォントの指定には,「font-family」を活用する方法があります。

しかし,「font-family」でフォントを指定したとしても,ユーザー側のPCでそのフォントがインストールされていないと,作成者の思った通りには表示されないため,「Webフォント」と呼ばれるフォント指定方法が最近の多くのWebサイトで使用されています。

 

 

Webフォントとは

まず,Webフォントの大きな特徴の一つは,フォント指定を,サイト閲覧者側のPCにインストールされているものではなく,「サーバー側に置かれている」もので行なうという点です。

「font-family」の場合,サイト閲覧者側のPCにインストールされているフォントの中から選択し表示させていました。 そのため,作成者が綺麗に表示されるフォントをせっかく選んでも,そのフォントがユーザー側のPCになければ,意味がなかったのです。

しかし,Webフォントの場合,閲覧者がサイトを開くと同時に,HTMLファイル,CSSファイルなどとともに,フォントデータも読み込むことになります。そのため,ユーザー側がどんな環境でサイトを閲覧していたとしても,作成者側の意図した種類のフォントで表示されるというわけです。

 

 

Webフォントのメリットとデメリット

SEO的観点からも望ましい

例えば,これまで,会社のロゴなど通常のフォントとは異なるもののの,すべてのPCで同じように表示したい場合,画像として表示するなどの方法しかありませんでした。

しかし,画像の場合,当然文字列として認識されないため,クローラーが認識せず,SEO的な観点からも望ましくなかったのです。 つまり,極端な話,ユーザーがある会社名を検索しても,当のサイト内でその会社名が主要な部分で使用されていないと,検索結果として表示されなくなってしまっていました。

しかし,このWebフォントを活用することにより,会社名などのロゴ部分にも画像ではなく,文字列として会社名を入れることができるようになったため,SEO対策として効果を期待できるようになりました。

 

 

制作者にとっても閲覧者にとっても助かる

これまでのように制作者側はフォントの選択に苦労することがなくなりました。これまでは,どのような閲覧環境でもきれいに表示させるため,いろいろと頭を悩ませてきました。

また,すべての閲覧環境で同じように表示させようとすると、「font-family」の指定では,選択肢が少なすぎ,構想に描いたWebデザインを実現することが困難でした。

一方,Webフォントの導入により,多種多様なフォントの中から自由にフォントを選択することができるようになり,表現できるデザインの幅が大きく広がりました。

また,これは閲覧者側にとっても見やすく,読みやすいWebサイトとなることを意味しています。 また,ますます多種多様となるモバイルデバイスで閲覧したときも,制作者の意図通り綺麗に表示されるようになります。

 

 

フォントをダウンロードする必要があるため,表示に時間がかかる

これは,Webフォントのデメリットにあたります。

当然,フォントデーターを表示のたびにサーバーからもってくることになりますので,その分,Webサイトの表示までの時間が少し遅くなることがあります。

特に,欧文フォントであれば,データー量は少ないためそれほど問題にならないのですが,日本語フォントの場合は,データー量が増えてしまうため,このダウンロード時間をできるだけ短縮することに注意を払う必要があります。

もっとも,近年はインターネット高速化が進んでいるので,Webフォントを活用しても,ユーザ―側はほとんど気にならないという場合もありますので,このデメリットだけでWebフォントの活用をあきらめてしまう必要はありません。

 

 

Webフォントの導入方法

Webフォントを導入す方法は大きく分けて2種類あります。どちらの場合も,フォントデーターはサーバーにあることには変わりないのですが,フォント情報をどのサーバーからダウンロードするかを選択することができます。

 

 

フォントデーターをHTMLやCSSファイルと同じサーバーに置く

これはつまり,Webサイト作成の際に,事前に特定のフォントをダウンロードしておき,それを自社のWebサイトを表示させるためのサーバー(HTMLやCSSファイルと同じ場所)にアップロードしておくということを意味します。

ユーザーがサイトを閲覧するときには,HTMLファイルやCSSファイルを読み込むと同時にそのサーバーからフォント情報もダウンロードされることになります。

この場合,実際の作業は以下の手順となります。

 

 

1.好きなフォントをダウンロードする

例えば「Webフォント 無料」などと検索すれば,多種多様なWebサイト用のフォントを検索できます。もちろん,その場合にも基本的に無料でも,Webサイト上で用いる場合は,何らかの条件が付くなどのものもありますので,クレジット関係を確認されることをおすすめいたします。

 

 

2.そのフォントをHTMLやCSSなどのデータとともにフォルダに保管する

HTMLファイルと同じ階層にすることもできますし,複数のWebフォントを活用するのであれば,「font」などのフォルダを新たに作成し,その中に保存することもできます。

 

 

3.フォルダに保管後,各種拡張子に変更する

ユーザーの閲覧環境によって読み込めるフォントファイルの拡張子は異なります。この場合の拡張子とは「.eot」や「.woff」などです。

ここだけが,少々面倒なのですが,各ブラウザによって表示できる拡張子が異なるのです。

どの拡張子がどのブラウザに対応しているかなどは覚える必要がありませんが,とりあえず以下の4つの拡張子でフォントを準備しておけば,一般的な全てのブラウザで表示できます。

.eot (特に古いIE用)

.woff (一部のFireFox,Opera用)

.ttf (古いIEとiOS4.0以外対応)

.svg (iOS4.0用)

ダウンロードする際に,これらの拡張子すべてをダウンロードできるなら,それをそのままフォルダに保管できます。

一方,そのフォントが一部の拡張子でしか提供されていない場合,以下の無料のサービスなどを活用して,各拡張子に変換できます。

 

 

Webfont Generator

 

 

4.CSSの上部に「font-face」として,以下のように記入

@font-face {
font-family: "nasa";
src:url("../font/nasa.eot");
src:url("../font/nasa.eot?#iefix") format("embedded-opentype"),
url("../font/nasa.woff") format("woff"),
url("../font/nasa.ttf") format("truetype"),
url("../font/nasa.svg") format("svg");
}

上の例は,フォント名が「nasa」,フォントデータを保管している場所はCSSフォルダと同じ階層,フォルダ名を「font」とした場合です。 必要に応じてこの部分は調整してください。

 

 

5.CSSのタグを指定し,「font-family」として記述

特定のタグに対して,先ほど「font-face」でも記述したフォント名を指定します。

例えば以下のようになります。

.font-nasa{
font-family: "nasa";
font-size: 1.5em;
}

上の例の場合,Class「font-nasa」というタグに対して,font-familyで「nasa」というフォント名を指定しています。

 

 

6.他のファイルとともにFTPソフトでサーバーにアップロード

これはいつものWebページを公開するときと同じ要領で,サーバーにアップします。

そうすることによって,ユーザーはサイトを閲覧するときに,HTMLなどのファイルと同時にフォントファイルもダウンロードし,設定したフォントで表示されるようになります。

 

 

まとめ

上記の手順で,Webフォントを活用できます。

Webフォントは自由にフォントを設定可能で,Webサイトのデザインや表現力をアップさせることができますので,ぜひ活用してみてください。

次回は,Webフォントを設定するもう一つの方法について取り上げたいと思います。

>コアース株式会社

コアース株式会社

業務システム開発一筋32年

コアースは、オーダーメイドでシステム開発を行う大阪の会社です。 特に中小企業様のニーズにぴったりなシステムをご提案いたします。

CTR IMG