はてなblogでGoogle Fontsを表示させる(@importで反映されない場合)
Google Fontsを使う
このblogだとサイドカラムのモジュールタイトルで利用しています。
簡単に文字の印象を変えることができるwebフォント、
欧文のみの利用なら、Google Fontsが導入しやすいです。無料。
こちらから。
Google Fontsで好きなフォントを選ぶ
1. 利用するフォントの右下にある「Add to Collection」という青いボタンをクリック
2. 画面下のグレーエリア右上3つ並んだボタンの右端「Use」ボタンをクリック
3. 遷移後の画面「3.Add this code to your website:」から「@import」を選択
ソースをコピーします
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; }
これで本番環境でも反映されました。