【STINGER6】Google Fontsを使ってMacでもフォントを綺麗に表示するカスタマイズ
2016/01/17

Google Fontsでフォントを統一する
実は、最近パソコンをMacに買い換えました。
で、Macで自分のブログを見てみると、フォントが何か変!
少し調べてみると、Webを閲覧するときのフォントは、PCにインストールされているものに依存するんだとか。
だから、ブログを閲覧するPCによって、表示されるフォントが異なるんだそうです。
そのため、フォントを統一するために、今話題のWebフォントを導入することにしました。
Webフォントの中でも設定の簡単そうなGoogle Fontsを導入してみたので、今日はその導入の流れをまとめておきたいと思います。
※Webフォントについては下記ブログが参考になります。
Google Fontsの導入
まずは、Google Fontsを開きます。
赤枠内に好きなフォントファミリーを入力。
フォントの種類は下記ブログが参考になります。
このブログは「Ubuntu」を利用しています。
フォントを入力したら、利用したいフォントの上記赤枠内をクリック。
フォントの太さやタイプを選べます。
次に3の「import」タブをクリック。
出てきたコードをstyle.cssファイルに追記します。
1 2 3 4 5 6 | /* Theme Name: stinger6child Template: stinger6 */ @import url('../stinger6/style.css'); @import url(https://fonts.googleapis.com/css?family=Ubuntu); |
こんな感じ。
次に4のコードもstyle.cssに追記します。
1 2 3 | * { font-family: 'Ubuntu', sans-serif; } |
共通部分に上記のように追記すればオッケーです。
これで、Google Fontsの導入は完了です!
ブログタイトルのみに適用する場合
1 2 3 | header .sitename a { font-family: 'Ubuntu', sans-serif; } |
上記のように、header .sitename a {}に追記すれば、Google Fontsをタイトルだけに適用することも出来ます。