css | プログラマーズ雑記帳

「 css 」タグ記事

フォントの埋め込みと Google Web Fonts 2012-03-10

フォントの埋め込みと Google Web Fonts

web制作 html css 使い方

ブログなどの web 制作をしていると巷にあふれているかっこいいフォントを使ってみたいと思ったことはありませんか ? そんなときに使うフォントの埋め込みと Google Web Fonts についての紹介したいと思います。

フォントの埋め込み、 WebFont

通常、ブラウザで表示するフォントはそのコンピューターにインストールされたものが使用されます。しかし、ネット上にはデザイン性の高いフォントがいろいろ公開されていて、それらのフォントを使って、自分のサイトをかっこよくしたいということがあります。
こういった場合、サイト上にフォントを置いておいて、閲覧者が HTML ページを表示するときに 一緒にフォントをダウンロードして、表示に使うようにすることができます。これをフォントの埋め込みといったり、そのフォントのことを WebFont といったりします。

ただし、フォントをダウンロードして使用するので、フォントファイルのサイズが問題になってきます。英語のフォントでは大したことはないのですが、日本語用のフォントだとサイズが大きく、ダウンロードに時間がかかってしまいます。そのため、埋め込みに使用するフォントは 英語のフォントのみにしておいた方がいいでしょう。

英語のみといっても意外と使い道はあります。例えば、次のようなところです。

メニュー、ボタン
日付
変数 <var> 、キーボード <kbd> のようなタグ内の文字

このブログでもページ上部のメニューやページナビのリンクに使用しています。

また、フォントをアイコンの代わりとして使用することも出来ます。

自分の好きなフォントを使うには通常のフォントの埋め込み方法と Google Web Font を使う方法があります。お勧めは Google Web Font ですが、まずは基本的なフォントの埋め込みを説明しましょう。

通常のフォントの埋め込み

フォントの埋め込みを行う場合には以下のような手順になります。

フォントをサイトにアップ
@font-face でフォント名を登録
登録したフォント名を利用

フォントのアップロード

まず、サイトで使いたいフォントを見つけて、そのフォントファイルをダウンロードします。
利用可能なフォントファイルは後述しますが、 TrueType フォント(ttf) であれば、まず、問題ないでしょう。

ただし、利用する場合にはフォントのライセンスを必ず確認して下さい。
フリーのフォントでも、製作者名の表示(Credit) が必須というものが多いです。

使いたいフォントを取得したら、それを使うサイトにアップロードします。
FC2 ブログでは通常のファイルのアップロードの方法と同じです。アップロードした後はそのファイルの URL をコピーしておきましょう。

フォント名の登録 @font-face

フォントの指定は CSS 上で行います。この指定にはフォント名を使うので、その前にフォントファイルにフォント名を付けておく必要があります。このフォント名の登録には @font-face を使用します。

@font-face は HTML5 Please では use with fallback になっています。
対応していないときの備えをしてから使っていいよということです。詳しくは以前の記事を見てもらうとして、実際、新しい仕様への対応が比較的遅い IE でも対応しているので、モダンなブラウザであれば、ほぼ利用可能でしょう。

HTML5 Please 読み方ガイド

CSS では通常のスタイル指定とちょっと違う指定を @規則 といって、 @ で始まるキーワードを使います。ただし、 @font-face の場合は通常のスタイルの指定方法と同じ型式です。

@font-face {
  font-family: Gentium;
  src: url(http://example.com/fonts/Gentium.ttf);
}

font-family でフォント名として登録したい名前を指定し、 src の後にフォントファイルを URL パスで記述します。

TrueType フォントであればほとんどのモダンブラウザで対応しているので、一番確実だとは思いますが、他にも指定可能なフォーマットはあります。

識別名	フォントフォーマット	拡張子
woff	WOFF (Web Open Font Format)	.woff
truetype	TrueType	.ttf
opentype	OpenType	.ttf, .otf
embedded-opentype	Embedded OpenType	.eot
svg	SVG フォーマット	.svg, .svgz

この識別名はフォントファイルを指定する際にフォーマット判定のヒントとしてつけます。
また、フォントファイルはカンマで区切って、複数指定することも出来ます。

@font-face {
  font-family: bodytext;
  src: url(ideal-sans-serif.woff) format("woff"),
       url(basic-sans-serif.ttf) format("opentype");
}

使えるフォントファイルはシステムやブラウザによって変わってきます。この例では WOFF ファイルのロードに成功すればそれを利用し、失敗すれば OpenType が使用されます。

フォントの利用

フォントを登録した後は通常のフォント名と同じように使用できます。

p { font-family: Gentium, serif; }

@font-face に対応していないか、指定したフォントファイルのすべてに失敗していると Gentium が有効になっていないので、 serif が使用されます。
この serif やフォントファイルの複数指定が対応していないときの備えです。まぁ、使えなかったとしても、ブラウザのデフォルトが使われるだけなので、それほど気にする必要もないです。

Google Web Font

フォントの埋め込みを行う場合はフォントファイルの場所を URL で指定します。そのため、必ずしもフォントを使用したいサイトと同じサイトにフォントファイルを置いておく必要はありません。
どこかにフォントファイルを公開してくれているサイトがあれば、そこへのパスを指定すればいいだけです。そんなサービスを提供してくれているのが Google Web Font です。

フォントのアップロードの手間が省けるだけでなく、次のような利点もあります。

@font-face による登録部分のコードも生成
フォントのロード時間をチェック可能
フリーなライセンス
- すべて Open Source Fonts で商用、個人用にかかわらず、 Credit なしで自由に使える。

フォントの数も 466 個と結構あります。(2012-03-10 時点)
サイトが社内 LAN にあって断然速いという場合や特に何か使いたいフォントがある場合などを除いては Google Web Font を使用する方がお勧めです。

使う手順は次のようになります。

フォントを選択
ロード時間をチェック
使用するためのコードを取得
フォントを利用

フォントの選択(Choise)

まずは使うフォントをリストから選択します。
サンプル文字列は変更することもできるので、メニューの文字列など実際に使う予定の単語で見た方がいいでしょう。
使いたいものが見つかったら、 [Add Collection] のリンクをクリックします。フォントは複数選択することができ、選んだフォントはページ下部のリストに追加されていきます。

ロード時間をチェック

フォントの選択が終わった後は、 [Use] のリンクをクリックします。そうするとフォントを使用するためのページに移動します。

そこでは右上にロード時間の速度メーターが出ているので、まずロード時間をチェックします。
フォントをあまりたくさん選びすぎるとロード時間がかかってしまうので、その場合は [Chose] で戻って、フォントを減らした方がいいでしょう。

使用するためのコードを取得

フォント埋め込みでは @font-face でフォントファイルにフォント名をつけてから使用します。 Google Web Font ではこの部分を記述した CSS ファイルを作成するところまで行うので、その CSS ファイルを取り込めば、フォントが使えるようになっています。

Use のページをスクロールしていくと、 CSS ファイルを取り込むためのコードがあります。

Standard, @import, Javascript の 3 つがありますが、シンプルな Standard, と @import でのやり方について説明しましょう。

Standard のコードは HTML ファイルのヘッダー部(<head> ～ </head>)に記述するための CSS ファイルのリンクです。
これを自分の CSS ファイルのリンクより前に追加します。

<link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One|Cantata+One|Oswald' rel='stylesheet' type='text/css'>
<link href='http://foo.bar.co.jp/my.css' rel='stylesheet' type='text/css'> <!-- 自分の CSS ファイル -->

@import のコードは使用する CSS ファイルに記述するものです。 @import というのは CSS で他のファイルを取り込むための @規則で、 C, C++ でいえば、 #include にあたります。
取得した行を自分の CSS ファイルの先頭に追加します。
個人的にはフォントの指定を CSS にまとめたかったので、こちらの方を使っています。

@import url(http://fonts.googleapis.com/css?family=Alfa+Slab+One|Cantata+One|Oswald);
@charset "utf-8";

/* スタイル設定 */

フォントの利用

あとはフォント名を使って、他のフォントと同様に使用することができます。

var {
    font-family: 'Oswald', sans-serif;
}

Google Web Font ではこの font-family による指定の例も記述されています。

スポンサーサイト

日	月	火	水	木	金	土
-	-	-	-	1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	-