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

目次

 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ファイルに追記します。

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

こんな感じ。

 

「STINGER6」Google Fonts

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

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

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

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

 

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

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

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

よかったらシェア!

コメントする

コメントする

※日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次
閉じる