【WordPress】CocoonでGoogle Fontsを活用する方法

ITライフハック

2023.11.01

この記事は約3分で読めます。

ウェブサイトやブログのデザインは、見た目の印象を大きく左右します。その中でも、文字のフォントは非常に重要な要素の一つです。今回は、Cocoon テーマを使用している WordPress ブログに、Google Fonts を導入する方法を紹介します。

Google Fontsとは？
CocoonにGoogle Fontsを導入する方法
Google Fontsの影響は？
まとめ

Google Fontsとは？

Google Fonts は、無料で利用できるWEBフォントサービスです。通常、ブラウザでウェブサイトを表示する際、そのデバイスにインストールされているフォントを使用します。しかし、Google Fonts を使用すると、デバイスに依存せずに特定のフォントを表示させることが可能になります。これにより、様々なデバイスでのフォントの表示を統一することができます。

CocoonにGoogle Fontsを導入する方法

Google Fontsの公式サイトにアクセスし、好みのフォントを選択します。

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

使いたいフォントを選択すると、「Styles」とフォントスタイルを選択する画面になります。そこで、使用したいスタイルの横にある「Select （スタイル名）」を選択します。
「Selected families」の画面になります。「Use on the web」セクションの内容をコピーしておきます。
WordPressの「外観」から「テーマファイルエディター」を選択します。
「編集するテーマを選択」で現在使っているテーマを選択します。（子テーマを使用してない方は、子テーマの使用をお勧めします。）
「tmp-user」の中の「head-insert.php」を選択します。
「<?php //全ての訪問者をカウントする場合は以下に挿入 ?>」移行に「3」でコピーしたコードを貼り付けます。
「ファイルを更新」を選択します。