Oh! WebLoG

アダルトサイト運営したり、健全なアフィリエイトしたり、フリーランスで仕事してみたり

web製作

WebFont導入[Google Fonts編]

更新日:

このブログを構築するにあたり、昔からやってみたかったウェブフォントを使用してみた。
Google Fontsから簡単に導入できたのでサクっとここに導入手順をメモしておきます。

フォントを探す

Google Fontsから、なんか昨日の「PageSpeed Insights」についての記事といい、俺すごいGoogle崇拝してるみたいね。
Google Font
https://www.google.com/fonts
Google Fonts

こんなページが開くので好きなフォントを選んでください。左のナビゲーションの項目をいじって欲しい書体に近いものを選んでください。
Google Fonts

 

選んだらこの赤枠部分のボタン「Quick-use」ボタンを押してください。ほかのボタンにもなんらかの機能があるのでしょうが、いちいち調べるのが面倒なのでスルーします。
Google Fonts

 

 

すると以下のような画面に遷移することと思います。想定と違う表示であればGoogleさんにクレームです。今スグ!さあ!!

Google Fonts

ここの画面から使用したいフォントを細かく決めていってください。英語が分からんという方はなんとなくふわっと手順を進めていってください。
特に「2. Choose the character sets you want」のところからよく分からんから初期状態のままやったけど特に問題なかった。

するとcssへのリンクタグが発行されています。

Google Fonts

中には@font-face記述のみのcssが格納されています。これを>head<内に記載するとめでたくfontが読み込まれている状態になります。
cssが増えるのが気になる人は記述を自分のcssの中に含めちゃってもいいかもしれない。俺やってないから動作は保障しかねるけど。

 

 

cssで対象としたい箇所に適用します

Google Fonts
赤枠部分の「font-family」を使っているcssの適用したい要素に記載してください。以下のような感じに。

 

例)たとえばh1要素に適用したい場合。

これで適用となります。あら簡単。

 

これでイケてるフォントの導入ができますね。肝心のこのブログのデザインはイマイチだけれどさ。
本当は日本語のWebFontも入れてみたかったのだけれども

  • 容量が重い
  • いい感じのものが無い

という理由から早々に諦めて英語だけをブログのタイトルにしました、だけど正直な話このタイトル、「Oh!WebLoG」だと何のブログか分からんね。
再考しなきゃな。。。

prof

no-ie

くま

己の不健康さにほとほと嫌気が指しました

menu

カテゴリリスト

新着記事

月別記事一覧