MD.WEBLOG

長野県飯田市、フリーランス、ウェブデザイン、ホームページ制作、CMS構築、映像制作、エディトリアルデザイン - MITAMA DESING -

Go To Home

Blog

blogトップ > HTML / CSS > 「Google Font Previewer for Chrome」で「Google web font」を簡単に導入! Webフォントに関して


「Google Font Previewer for Chrome」で「Google web font」を簡単に導入! Webフォントに関して

 2012年12月27日   タグ: ,

「Google Font Previewer for Chrome」で「Google web font」を簡単に導入! Webフォントに関して
CSS3から新たに導入されたWebフォントですが、これまで案件などで必要とする機会がなかったのもあって試していませんでしたが、ちょっと調べてみるとWebフォント関連のサービスが大分充実していきいるようです。今回は、「Google web font」を簡単に導入する方法中心にを紹介します。また、前半は、Webフォントの一般的な導入について説明しています。

Webフォントとは?

CSS2.1のfont-familyプロパティでは、フォント名や総称ファミリ名でフォントを指定します。

例:

body {
font-family:"メイリオ','Meiryo','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','Osaka','MS Pゴシック",sans-serif;
}

しかしながら、ユーザーのローカル環境にインストールされているフォントを指定するもので、使用できるフォントは限られていることと、Windows と Mac で標準にインストールされているフォントが違っているので、Macだと、1行増えてしまったりして見栄えがうまく調整できないといったことも多いです。

CSS3から導入されたWebフォントは、サーバー上にアップロードされているフォントファイルを読み込んで表示するため、Windows、Mac で共通の表現が実現できるのと同時に、デザインの表現方法が大幅に広がります。

Webフォントを使用するメリット

・サイトの更新管理が楽

・画像を使用しないのでページの読み込みが軽い

・自動翻訳にも対応。

・コピー&ペーストができる。

・デザインの表現の幅が広がる。

・SEOにも有効



Webフォントの使い方

仮に「xxxx.ttf」というフォントを表示するとします。

フォントをサーバーにアップロードしておきCSS3で以下のように記述します。

/*フォントを読み込む*/
@font-face {
  font-family: 'xxxx';
  src: url('../font/xxxx.ttf') format('truetype');
}

/*クラスを指定する*/
.xxxxFtype {
  font-family: 'xxx';
}

このCSSファイルをHTMLに読み込んで、任意のタグにクラス「xxxxFtype」を指定すれば、好みのフォントで表示することが出来ます。


IE8以下に対応する

フォント形式をコンバートする

IE8では、後で記述する「EmbeddedOpenType」というフォント形式しか対応していないので、同じフォントの「EOT形式」を用意します。「ttf2eot」フォントコンバートサービス等でコンバートします。

複数のフォント形式を読み込む

CSS3で以下のように記述します。

@font-face {
    font-family: 'xxxx';
    src: url('../font/xxxx.eot?') format('eot'), /*IE8以下*/
         url('../font/xxxx.woff') format('woff'), /*FireFox、Chrome、Opera、IE9*/
         url('../font/xxxx.ttf') format('truetype'); /*Safari、iOS4.2以上、Android2.2以上*/
}

サンプルはコチラ

利用できるフォント形式

Webフォントで利用できるフォント形式には、以下のようなものがあります。

()内は拡張子です。

WebOpenFontFormat(WOFF)は、Web用に開発されたフォント形式でデータが軽いのが特徴のようです。

TrueType(.ttf)
OpenType(.ttf、 .otf)
WebOpenFontFormat(.woff)
EmbeddedOpenType(.eot)※IEのみ
SVG Font(.svg、 .svgz)

詳しくは、ThinkITさんで、詳しく紹介されているので参照してください。


利用上の注意点

フォントは、ライセンスが厳しいため、市販のフォントはウェブフォントでは利用できないと考えておいたほうが良いと思います。フリーフォントでも個人利用はできるけど、商用はだめだったり、再配布は禁止だったりライセンスはフォントによって違うので、それら全てを確認したながらの導入となるとかなり大変な作業になりますし、その手間とライセンスの制約のために、せっかくデザインした後、コーディングの段で、結局はあまり多くのフォントを使えないという自体に陥る可能性もあるので注意が必要です。

Webフォントに利用可能なフォントをまとめたサイト

実際に導入する場合は、このような、サイトで紹介されているフォントの中から導入すればよいと思います。

英文フォント

Font Squirrel @font-face Kit



Fonts.com

ユーザー登録するとフォントを利用できます。無料プラン、有料のプランがあります。



日本語フォント

ヨモツネット

Webフォントとして利用できるフリーの和文フォント



フォントプラス



デコもじ



Google Web Font を利用する

今回ここまで、Webフォントに関していろいろと説明してきましたが、本題は、実はここからです。実際にWebフォントを導入するなら、「Google Web Font」が現実的かなと思います。しかしながら現状では日本語フォントに対応していないので、この辺りが今後クリアされればですが。



「Google Font Previewer for Chrome」をブラウザにインストールする

今回は、ブラウザは「Google Chrome」で説明します。「Google Font Previewer for Chrome」をインストールします。 「Google Font Previewer for Chrome」で、好みのフォントを選びます。

以下の画像を参照してください。フォントを選択すると、フォントを読み込むコードが表示されるので そのコードをHTMLのheadタグ内に記述するだけです。



サンプルはコチラ

Google Web Fontの導入方法は@ITさんでも、詳しく紹介されています。

このエントリーをはてなブックマークに追加

  |  Blog TOP   |