[SWELLカスタマイズ] Google Webフォントの利用方法

2022年6月5日

【PR】この記事には広告を含む場合があります。

サイトデザインにオリジナリティーを出す良い方法は？

ぺん

Webフォントをつかうと、サイトの雰囲気が変わります

今回は、WordPressテーマ「Swell」で、Google Webフォントで公開されている日本語Webフォントを利用する方法をご紹介します。

この記事を書いた人

学生時代はコンピューターサイエンスを専攻
外資系IT企業で各種システム開発プロジェクト＆ITコンサルティングに従事
2017年から複数のWordPressサイトを運営中

ぺん

IT業界で働いているので、テクニカルな記事を中心にお届けします。

この記事の内容

Webフォントの特徴
Google Web FontsでのWebフォントの選び方
SWELLでWebフォントを表示させるカスタマイズ方法
特定のページのみWebフォントを利用する方法

Webフォントの特徴

Webフォントはサーバー上からフォントデータを表示する

Webフォントとは、Webサイト等に表示可能なフォントです。

Webフォントのフォントデータは、自分のサイトをホストしているレンタルサーバー、またはインターネット上のクラウドサーバーに保存されています。

これらのフォントデータを読み込むことで、Webサイトに好きなフォントを表示することができます。

ぺん

Webフォントをつかうと、PC、スマホで、好きなフォントを表示することができます。

Webフォントでサイトの雰囲気は大きく変えられる

無料で使える日本語Webフォントは、数十種類以上あります。

フォントを変更すると、サイトの雰囲気をガラッとかえることができます。

他とは違う、独自の雰囲気のサイトを作りたい場合にはWebフォントの利用はおすすめです。

Google Web Fontsで公開されているフォントの中から、日本語Webフォントの表示イメージをご紹介します。

ぺん

下記では、この記事で紹介している方法で、Google Web Fontsのフォントを表示しています。

Kaisei Decol

Kaisei Decolは、ラインの先端のデザインが特徴的なフォントです。

Yusei Magic

Yusei Magicは、縦線が太く、横線が細い、ペンで手書きしたようなフォント。

Mochiy Pop P One

Mochiy Pop P Oneは、記事タイトルやヘッダーに使うと映えそうなフォントですね。

ぺん

オリジナリティーを出したい場合には、Webフォントの利用はおすすめです。

Webフォントを使いすぎるとサイトの描画速度が低下するので注意

Webフォントにも弱点があります。

フォントデータのサイズが大きな日本語Webフォントを使いすぎると、サイトの描画速度が低下する場合があるのです。

Webフォントの使い過ぎには注意しましょう。

ぺん

Webフォントを使うと、フォントデータを追加で読み込む分、サイトの描画速度が低下してしまいます。

日本語Webフォントは、文字数が大きいためフォントデータが大きく読み込みに時間がかかるので注意

Google Webフォントの使い方

Google Web Fontsでは、数多くのWebフォントが無料で公開されています。

Google Fonts

Browse Fonts – Google Fonts Making the web more beautiful, fast, and open through great typography

ここではGoogle Web Fontsからフォントを選択して、サイトから利用する方法を解説します。

Webフォントを選択する

まずは、Google Web Fontsで公開されているWebフォントから、使いたいフォントを探してみましょう。

STEP

Google Web Fontsにアクセスする

Google Fonts

STEP

Languageを選択

「Japanese」を選択します。

STEP

自分のサイトで使いたいWebフォントを選ぶ

好みのフォントを選びましょう。

ぺん

公開されている日本語Webフォントは、どんどん増えていますよ

ここでは、例として「Yusei Magic」というフォントを選んでみます。

フォントの読み込み、表示用のコードをコピーする

Google Web FontsのWebフォントを「表示するためのコード」を取得しましょう。

STEP

「select this style」を選択

「Select Styles」タブを選択します。

次に「Select this style +」をクリックします。

選択したWebフォントを利用するための、CSSコードが表示されます。

Webフォントをサイトに表示するためのCSSの設定方法は、このあと解説します。

[SWELL]サイトでGoogle Webフォントを利用する方法

ワードプレステーマ「SWELL」のサイトで、Webフォントを利用するカスタマイズ方法を解説します。

設定の流れは、以下の通りです。

Webフォントをサイトに登録する
SWELLカスタマイズ用のスタイルシート（CSS）を定義する
CSSを登録する

ぺん

１つずつ、詳しく解説していきます

Webフォントをサイトに登録する

Webフォントをサイトに表示可能とするためには、Webフォントのデータを読み込む必要があります。

ここではサイト全体でWebフォントを表示する方法を解説します。

Webフォント読み込み用link要素を取得する

事前にGoogle Webフォントの使い方で解説した方法でWebフォントを選択します。

STEP

「<link>」を選択する

「フォント読み込み」と記載した部分のコードをコピーします。

Webフォント読み込み用link要素

このlink要素を<head>タグの中に表示するように設定すれば、Webフォントが利用可能になります。

<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=Yusei+Magic&display=swap" rel="stylesheet">

コードを<head>タグ内に登録してWebフォントを表示可能にする

STEP

WordPress管理画面から「外観」＞「カスタマイズ」を選択する

STEP

「高度な設定」を選択する

STEP

<head>タグに「Webフォント読み込み用link要素」を登録

一番上の「headタグ終了直前に出力するコード」に、Step1で取得した「Webフォント読み込み用link要素」を登録して、「公開」ボタンをクリックします。

ぺん

これで、選択したWebフォントが表示可能となります。

SWELLカスタマイズ用のスタイルシート（CSS）を定義する

Webフォントを表示するためには、スタイルシート（CSS）でWebフォントの表示箇所を指定する必要があります。

Webフォント表示用のCSSを取得する

STEP

「Webフォント指定」用のコードをコピーする

Google Webフォントの使い方で解説した方法でWebフォントを選択します。

「フォント指定」と記載した部分のコードをコピーします。

Webフォント指定用CSS

Webフォントを表示したい箇所に、このフォント指定用CSSに記載の内容をCSSとして登録します。

font-family: 'Yusei Magic', sans-serif;

ここからは、SWELLにおいてWebフォントを表示するためのスタイルシート定義（CSS）について解説します。

下記のスタイルシート定義では、例として‘Yusei Magic’というWebフォントを指定します。font-family以外の定義は省略しています。

メニュー（PC)

PC用のグローバルメニューです。

#gnav{
font-family: 'Yusei Magic', sans-serif;
}

メニュー（スマホ）

こちらはスマホ用のメニューです。

.p-spHeadMenu{
font-family: 'Yusei Magic', sans-serif;
}

記事タイトル

記事タイトルにWebフォントを使うと、映えますね。

.c-postTitle__ttl{
font-family: 'Yusei Magic', sans-serif;
}

記事目次

こちらは、PCでの目次です。

.post_content .p-toc{
font-family: 'Yusei Magic', sans-serif;
}

ヘッダー＜H1～H6＞

こちらはヘッダー（見出し）のスタイル定義です。

ぺん

見出しのフォントを変えると、サイトの印象が大きく変わりますね

.post_content h2{
font-family: 'Yusei Magic', sans-serif;
}

.post_content h3{
font-family: 'Yusei Magic', sans-serif;
}

.post_content h4{
font-family: 'Yusei Magic', sans-serif;
}

.post_content h5{
font-family: 'Yusei Magic', sans-serif;
}

.post_content h6{
font-family: 'Yusei Magic', sans-serif;
}

記事本文＜P＞

記事本文のフォントでもっとも大切なのは「読みやすい」ことです。

今回ご紹介しているYusei Magicは、デザインは面白いのですが、記事本文のフォントとしては読みずらいかもしれません。

.post_content p{
font-family: 'Yusei Magic', sans-serif;
}

ウイジェット（サイドバー）

サイドバーも、ヘッダー（見出し）と合わせてフォントを変えてみると、サイトの雰囲気が大きく変わります。

#sidebar{
font-family: 'Yusei Magic', sans-serif;
}

CSSを登録する

カスタマイズしたスタイルシート（CSS）を設定します。

STEP

WordPress管理画面から「外観」＞「カスタマイズ」を選択する

STEP

「追加CSS」を選択

STEP

追加CSSに設定したいスタイル定義を登録して「公開」ボタンをクリック

これで登録したスタイルが、サイト全体に設定されます。

スタイルシート（CSS）の設定方法については、下記の記事もご覧ください。

>>WordPressのCSS（スタイルシート）の設定方法

[SWELL] 特定のページのみWebフォントを利用する方法

Webフォントを使いたいけど、サイトが遅くなるのが心配

Webフォントは便利ですが、使いすぎるとサイトの描画速度が遅くなってしまいます。

その解決策として、特定のページだけでWebフォントを使うという方法があります。

ワードプレステーマ「SWELL」には、各ページにスタイルシート（CSS）や、JavaScriptを設定する機能があり、その機能を使うと特定のページだけでWebフォントを利用することができます。

ここからは、ワードプレステーマ「SWELL」のサイトで、Webフォントを特定のページだけで利用する方法を解説します。

設定の流れは、以下の通りです。

Webフォントを表示するためのCSSを取得する
SWELLカスタマイズ用のスタイルシート（CSS）を定義する　
CSSを登録する

「SWELLカスタマイズ用のスタイルシート（CSS）を定義する」は、3-2章をご覧ください。

Webフォントを表示するためのCSSを取得する

事前にGoogle Webフォントの使い方で解説した方法でWebフォントを選択します。

STEP

「＠import」を選択する

「フォント指定」と記載した部分のコードをコピーします。

Webフォント読み込み用CSS

このCSSから<style></style>タグを削除したコードを、SWELLの記事ページの「CSSコード」入力欄に入力すれば、そのページだけにCSSが適用されます。

<style>
@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');
</style>

↓

実際に利用するのは、<style></style>タグを除去した、下記のコードを使います。

@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');

特定のページにCSSを登録する

カスタマイズしたスタイルシート（CSS）を、特定のページに登録します。

STEP

「CSS用コード」にCSSを登録して、記事を更新する。

ここで登録した設定は、そのページのみに適用されます。

まとめ

今回はWebフォントの設定方法について解説しました。

Webフォントを利用すると、サイトの雰囲気を大きく変えることができますが、使い過ぎるとサイトの描画速度が遅くなるので注意が必要です。

目的に応じて、下記の方法を使い分けましょう。

サイト全体にWebフォントを利用
一部のページのみでWebフォントを利用

この記事が気に入ったら
フォローしてね！

Follow @affiliate_bizjp

よかったらシェアをお願いします！