IE6-8 is Not Supported

Google Fonts で複数のフォントやウェイトを使用するときの正しい記述方法

サービスがスタートして以来、急速に普及した Google Fonts に関するメモ。
使っている人のソースを覗くと意外と発行されたものをそのままコピペしているので、一括でまとめて指定する方法をご紹介します。

今回は例としてOpen Sansのウェイト 400 と 700、Lobster を使用してみたいと思います。

1. デフォルトのソースコード

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

複数のウェイトはフォント名:ウェイト,ウェイトになっているのがわかります。ここまでは Google Fonts 側が自動でやってくれます。

2. 2つのフォントをまとめて指定する

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700|Lobster' rel='stylesheet' type='text/css'>

複数指定には|(Vertical Bar) を使って記述します。 JIS キーだと SHIFT + ¥ のあまり使わないあれです。これでリクエスト回数を減らせます。

3. プロトコルと type 属性を省略する

<link href='//fonts.googleapis.com/css?family=Open+Sans:400,700|Lobster' rel='stylesheet'>

これで完成。http: を省略することで http もしくは https に対応できます。type 属性はあってもいいですが HTML5 では必須ではないので省きました。

少し記述を変えるだけでより便利になるので試してみてくださいね!

ads by google