別冊webメモ

自分用リファレンス&アウトプット

はてなblogでGoogle Fontsを表示させる(@importで反映されない場合)

Google Fontsを使う

このblogだとサイドカラムのモジュールタイトルで利用しています。
簡単に文字の印象を変えることができるwebフォント、
欧文のみの利用なら、Google Fontsが導入しやすいです。無料。

Google Fonts

こちらから。

Google Fontsで好きなフォントを選ぶ

1. 利用するフォントの右下にある「Add to Collection」という青いボタンをクリック
2. 画面下のグレーエリア右上3つ並んだボタンの右端「Use」ボタンをクリック

3. 遷移後の画面「3.Add this code to your website:」から「@import」を選択

f:id:aoicotori:20131119195342p:plain
ソースをコピーします

4. その下の「4. Integrate the fonts into your CSS:」にかいてあるソースもコピー

はてなblogのデザインからカスタマイズする

5. はてなblog>デザイン>カスタマイズから「デザインCSS」を選択。ここにソースを書きます。
6. 「3.」でコピーしていた@importからはじまるソースをペースト
7. 利用したいテキストに「4.」でコピーしたcssを指定

こんなかんじ

@import url(http://fonts.googleapis.com/css?family=Share+Tech+Mono);
h1 { font-family: 'Share Tech Mono', sans-serif; } 

これでwebフォントで表示されます。


……


のはずなのですが、
プレビューでは反映されているものの、本番環境は元のまま…
あれー

ということで、リンクをもう一踏みしてみました。(@importで反映されない場合)

@import url(http://fonts.googleapis.com/css?family=Share+Tech+Mono);

この@importに書かれている、URL先をみてみると(ブラウザのアドレスバーにURLコピペ)
@font-faceからはじまるソースが書かれています。


これをさっきの@importが書かれていた場所にかわりにいれます。

@font-face {
     font-family: 'Share Tech Mono';
     font-style: normal;
     font-weight: 400;
     src: local('Share Tech Mono'), local('ShareTechMono-Regular'),url(http://themes.googleusercontent.com/static/fonts/sharetechmono/v1/RQxK-3RA0Lnf3gnnnNrAsaH0X__W3S3MJL29bc5CWfs.woff)format('woff');
}
h1 { font-family: 'Share Tech Mono', sans-serif; }

これで本番環境でも反映されました。