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

2016/01/17 2016/07/28

コンテンツ

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
Theme Name: stinger6child
Template: stinger6
*/
@import url('../stinger6/style.css');
@import url(https://fonts.googleapis.com/css?family=Ubuntu);

Theme Name: stinger6child

Template: stinger6

@import url('../stinger6/style.css');

@import url(https://fonts.googleapis.com/css?family=Ubuntu);

こんな感じ。

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

* {
	font-family: 'Ubuntu', sans-serif;
}

* {

font-family: 'Ubuntu', sans-serif;

}

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

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

header .sitename a {
	font-family: 'Ubuntu', sans-serif;
}

header .sitename a {

font-family: 'Ubuntu', sans-serif;

}

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