Sibatabi

旅の経験を情報として配信するブログ

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

 2016/01/17 
stinger6

 Google Fontsでフォントを統一する

実は、最近パソコンをMacに買い換えました。
で、Macで自分のブログを見てみると、フォントが何か変!

少し調べてみると、Webを閲覧するときのフォントは、PCにインストールされているものに依存するんだとか。
だから、ブログを閲覧するPCによって、表示されるフォントが異なるんだそうです。

そのため、フォントを統一するために、今話題のWebフォントを導入することにしました。

Webフォントの中でも設定の簡単そうなGoogle Fontsを導入してみたので、今日はその導入の流れをまとめておきたいと思います。

※Webフォントについては下記ブログが参考になります。

 

Google Fontsの導入

まずは、Google Fontsを開きます。

「STINGER6」Google Fonts

赤枠内に好きなフォントファミリーを入力。

フォントの種類は下記ブログが参考になります。

このブログは「Ubuntu」を利用しています。

 

「STINGER6」Google Fonts

フォントを入力したら、利用したいフォントの上記赤枠内をクリック。

 

「STINGER6」Google Fonts

フォントの太さやタイプを選べます。

 

「STINGER6」Google Fonts

次に3の「import」タブをクリック。
出てきたコードをstyle.cssファイルに追記します。

こんな感じ。

 

「STINGER6」Google Fonts

次に4のコードもstyle.cssに追記します。

共通部分に上記のように追記すればオッケーです。

これで、Google Fontsの導入は完了です!

 

ブログタイトルのみに適用する場合

上記のように、header .sitename a {}に追記すれば、Google Fontsをタイトルだけに適用することも出来ます。