fontでライバルサイトに差をつける！グーグルフォント使い方

2023年08月03日

html＆css

連日フォント関連の記事を投稿させていただいておりますので、本日もフォント関連ということでwebサイトでのグーグルフォント（webフォント）の使い方について書いていきたいと思います。

フォントを変えるだけでホームページの印象はガラッと変わります。

ライバルサイトとの差別化やサイトのテーマにあったフォントを使用することでイメージの固定化・ブランディングにもおしゃれなフォントは欠かせません。

グーグルフォント使ってみたい
ライバルに差をつけたい
記事は若干いい加減でもいい
少しでも為になれば

グーグルフォント（webフォント）って何？

グーグルフォントは天下のグーグル様が提供しているフォントサービスでその数なんと1000以上のフォントを準備してくれています。グーグルフォントはダウンロードはもちろんのことwebサイトでも使用することができます。

日本語フォントもあって、サイトに少し変化をもたせたい、見た目を変えたい、サイトのイメージにあったフォントにしたい。などの問題を一手に解決してくれます。

ホームページのフォントは基本的に見ている方のパソコンにインストールされているフォントで表示されます。作り手がAというフォントでサイトを作っていても、見ている方のパソコンにAというフォントがインストールされていない場合、Aというフォントで表示されず、ほかのフォントに代替えされます。

この問題をグーグルフォント（webフォント）は解決してくれます。

グーグルフォントはインターネットでフォントを読み込むので、サイトを見ている方のパソコンにインストールされていない場合でも、指定のフォントを表示させることができます。

グーグルフォントのホームぺージでの使い方

使い方はとても簡単です。

まずはグーグル検索でグーグルフォントと検索

またはこちら

一番上に出てくるGoogle Fontsをクリック

するとフォントの一覧が出てきます。

簡単に画面の説明をさせていただきます。

よく使うのはこの３つで

①のSearch fontsは検索窓口で、フォント名を入れると、検索されます。

②は文字の大きさを変えれます。

③Languageは日本語フォントなど、言語を選ぶことができます。

横にあるcategoriesはサンズフォントやセリフフォントなどフォントの種類を絞ることができます。

それでは一つ日本語フォントをサイトで使えるようにしてます。

③のLanguageからJapaneseを選択してください。

日本語フォントの一覧が出てくると思いますので、その中から

Noto Sans japanese

をクリックしてください。

クリックするとNoto Sans japaneseフォントの詳細画面になります。

Noto Sans japaneseフォントはマリオ君のサイトでも使用しています。

詳細画面の中部あたりにStylesというフォントのウェイト（太さ）の種類一覧ができてきます。
※ウェイト（太さ）の種類がないフォントもあります。

使いたいウェイト（太さ）の＋マークをクリックします。今回は例で500と600をクリックします。

クリックするとマイナスにアイコンがかわり、右サイドにホームページに貼り付けるコードが出てきます。
※＋マークをクリックしても右サイドにコードが出ない場合はサイトを再読み込みして更新してください。

あとはコードをホームぺージに貼り付けるだけです。

一番上の部分は複数フォント入れた場合やいらなくなったウエイトを消すことができます。

また、複数フォントもいれれますので、複数入れたい場合は再度一覧にもどって、同じ作業をしてください。

上記のコードにプラスして追加したフォントの記述が入りますので、そちらをホームぺージにコピーしてください。

それではりつけてみます。
<link rel=から始まるコードをhead内にコピペします。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>webフォント使い方</title>
	
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;600&display=swap" rel="stylesheet">
	
</head>

<body>
</body>
</html>

<head>～</head>の間にコピペします

７行目から９行目に貼り付けました。

あとはCSSにfont-familyの部分をCSSに貼り付ければ完成です。

		body{
			
			font-family: 'Noto Sans JP', sans-serif;
			font-weight: 500;
			
		}
		
		.midashi{
			
			font-family: 'Noto Sans JP', sans-serif;
			font-weight: 500;
		}

全体に適用したい場合はbodyに、クラスで使用した場合はクラスを作ってコピペしてください。
ウエイト（文字の太さ）も変更もできます。（今回は500と600をいれていますので600も使えます）

文字を選んでコピペするだけでおしゃれのフォントをホームぺージに実装することができました。
簡単ですね。

ここがチェケラ

ポイントです

POINT

コピペで簡単にかっこいいフォントを実装できるのがグーグルフォント

※フォント自分のパソコンで使いたい場合はぺージ上部にあるDounload familyでフォントをダウンロードすることができます。

Webフォントデメリット

簡単にコピペでかっこいいフォントをホームページに実装できるグーグルフォント（webフォント）ですが、少しだけデメリットというか注意点があります。

それは、インストールしまくるとサイトが重くなるということです。

特に日本語フォントは文字数が多いので重くなりがちです。

日本語フォントをたくさんインストールして、フォントウェイトもたくさん選択すると表示のパフォーマンスが落ちますので、厳選して使うようにしましょう。

また、たくさんのフォントをいれると重くなるだけでなく、見た目もちぐはぐになりがちなので、そちらも合わせて注意しましょう。

個人的にはウエイトを含めて4つ程度がいいかと思います。

ちなみにマリオ君は結構いれていますので、表示速度悪いです・・・。
しかし、これは理解して（デザインや見やすさとのバランスで表示速度を少し犠牲にしている）行っているので、良しとしています。

あと、ホームページが完了してからフォントを変更するとレイアウト崩れなどの原因になりますので、グーグルフォントを使用する場合は、初めから導入してコーディングするのがおすすめです。