Google Web Fontsで提供されるstylesheetの中身をコピー

サイトのメインcssにダイレクトに書き込むことで1リクエスト減少させることが可能

Google Web Fontsで利用したいフォントを選択すると、以下のようなwebページに追記するためのhtmlが提供される。

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

このコードを貼り付けることでWebフォントが利用可能になるのだが、HTTPリクエストが一つ増えることになる。

コードを直接貼らずに、上の例の場合であれば、

http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600

というURLに直接アクセスしてみる。

すると、以下のようなfont-faceが設定されたcssが表示される。

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/ODelI1aHBYDBqgeIAH2zlNzbP97U9sKh0jjxbPbfOKg.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/toadOcfmlt9b38dHJxOBGNNE-IuDiR70wI4zXaKqWCM.ttf) format('truetype');
}

サイトでメインに読み込んでいるcssファイルに上のfont-faceの記述を追記すれば、Google Web Fontsの導入で増加する1リクエストを抑えることができる。

Google Web Fontsを利用する際には知っておきたいノウハウ。