【解説】デザインを左右するGoogle Fontsの使用方法

記事内に商品プロモーションを含む場合があります

生徒さん

デザインの知識はないんだけど、サイトをオシャレに見せる方法ってないのかな？

このような疑問に回答します。

「サイトデザインを変えないでオシャレに見せる方法」の一つは、フォントを変えることです。フォントを変えることで見栄えが全く変わります。

Google Fontsの種類（例）

画像はアルファベットですが、それでも見た目の印象が全然違うことが分かるはずです。

本記事では、手軽に取り入れられる Google Fonts の使い方について解説していきます。

Contents

Google Fontsでできること
1. フォントでデザインが左右する
Google Fontsの使い方
1. CDNを利用する
2. パソコンに直接ダウンロードする
CDNとダウンロードをどのように使い分ければいい？
まとめ

Google Fontsでできること

例えば、本サイトのLPでもGoogle Fontsを利用しています。

自サイト内でもGoogle Fontsを利用

フォントでデザインが左右する

元の状態も見てみましょう。
先ほどのLPから Google Fonts を解除してみます。

フォント指定を解除した状態

比べてみると以下の通り。

Google Fonts適用前後

全く印象が異なりますね。

文字間（カーニング）が広くなっている
文字サイズが大きくなっている

ちょっと安っぽいデザインになっています。

このようにフォントによってデザインが大きく左右します。

Google Fontsの使い方

違いが分かったところで、次にwebサイトにgoogle フォントを適用方法について解説していきます。

使用方法には2パターンあります。

CDNを利用する
パソコンに直接ダウンロードする

最初にそれぞれのメリット・デメリットについても説明します。
以下の通りです。

	メリット	デメリット
CDN	手軽に利用できる	仕様が変わると表示されない可能性がある
CDN	見た人のPCにフォントがなくても表示される
ダウンロード	コード量が抑えられる	見た人のPCにフォントが入っていないと表示されない
ダウンロード		ダウンロードしないといけない

オススメはCDNで使用することです。

表を見ても分かる通り、webサイト閲覧者のパソコンにフォントが入っていないと適用されないのは、割と致命的だと思います。

人によってPC環境は様々ですので、Aさんにはフォントが入っているから適用されて、Bさんには適用されない。

こういったことがないようにCDNを使用することをオススメしています。

※フォントがない場合、他フォントに代替えして表示されます

CDNを利用する

まずgoogle フォントのサイトに飛びます。

使用したいフォントを選択しましょう。

使用したいフォントを選択

フォントを選んだら右端にある「+ Select this style」をクリックします。

+ Select ths styleをクリック

linkをコピーします。

linkのソースコードをコピー

コピーしたコードを、自サイトのHTMLファイル内にあるheadタグに記述します。

<head>
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Goblin+One&display=swap" rel="stylesheet">
</head>

CSSも用意されているのでコピーし、適用させます。

CSSプロパティもコピー

これを適用させたいセレクターに追記します。

.page-id-1946 .cps-post-main .content .and {
	font-family: 'Goblin One', cursive;
	font-style: italic;
	font-size: 36px;
	text-align: center;
	opacity: 0.6;
	letter-spacing: 0;
}

適用されているかブラウザで確認しましょう。