【WordPress /SWELL】Googleフォントを使用する方法

24.10.1824.12.08

当ページのリンクには広告が含まれています。

こんにちは、おはぎです。
ブログ制作やWebデザイン勉強中で、学んだことをこのブログでアウトプットしています。

読者の悩み

SWELLでGoogle Fontsを使ってフォントを変更する方法をわかりやすく解説します。

Webフォントを使用することでより洗練されたデザインを簡単に実現でき、サイトの印象を大きく変えることができます。

この記事でわかること

SWELLでGoogle Fontsを使用する方法

一番手軽に実装できる「header.php」を編集する方法をご紹介します。

テーマファイルを直接編集するとファイル破損などの危険性があるため、必ず修正前にバックアップをとっておきましょう。

　Google Fonts にアクセスし、画面上部の検索バーにフォント名を入力するか、カテゴリーから好みのフォントを探します。

　気に入ったフォントをクリックし、フォントのスタイルやサイズを選択します。

可変フォントか、可変未対応フォントかによって、若干操作が異なります。

可変フォントの場合　（例）Noto Sans Japaneseなど: 「Full Axis」を選択し、「Web」タブの<link>から、HTMLリンクタグをコピーします。
可変未対応フォントの場合　（例）Zen Maru Gothicなど: 左側から使用するフォントをすべて選択し、「Web」タブの<link>から、HTMLリンクタグをコピーします。

上のステップでコピーしたHTMLコードをWordPressに追加します。

STEP

WordPressダッシュボードから「外観」→「カスタマイズ」を選択

STEP

「高度な設定」→「</head>直前」にHTMLタグを貼り付ける

先ほどコピーしたGoogleフォントのHTMLタグを</head>直前欄に貼り付けます。

Google Fontsからfont-familyのコードをコピーし、変更したい箇所にCSSを追加します。

CSSのカスタマイズ方法は下記リンク先をご覧ください。

Webフォントを使用すると、ブラウザはフォントファイルをダウンロードしてからサイトを表示するため、表示速度に影響を与える可能性があります。

使用するフォントのみを設定しましょう。

（使うかもしれない・・と設定するのはやめた方がいいです。）

できます。

ですが、「Easy Google Fonts」や「Japanese Font for WordPress」は長期間アップデートされていないため、おすすめできません。

今回は、SWELLでGoogle Fontsを使ってフォントを変更する方法を解説しました。

Googleフォントの使用方法まとめ

フォントを変更するだけでも、サイトの印象はかなり変わります。
サイトのイメージに合ったフォントを選んで試して見てくださいね！

↓このブログはConoHa WINGを利用しています↓

よかったらシェアしてね