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

【PR】この記事には広告を含む場合があります。
SWELLカスタマイズ-Webフォントの使い方

当サイト「あふぃぶ」では、ワードプレスの設定、運用方法など、テクニカルな情報を中心にお伝えしています。

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

ぺん

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

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

この記事を書いた人

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

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

この記事の内容
  1. Webフォントの特徴
  2. Google Web FontsでのWebフォントの選び方
  3. SWELLでWebフォントを表示させるカスタマイズ方法
  4. 特定のページのみWebフォントを利用する方法
目次

Webフォントの特徴

Image of fonts

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

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

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

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

ぺん

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

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

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

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

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

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

ぺん

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

Kaisei Decol

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

Webフォントその1

Yusei Magic

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

Webフォントその3

Mochiy Pop P One

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

Webフォントその2
ぺん

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

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

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

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

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

ぺん

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

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

Google Webフォントの使い方

Google Fonts ロゴ

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

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

Webフォントを選択する

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

STEP
Google Web Fontsにアクセスする
STEP
Languageを選択

「Japanese」を選択します。

Google Fontsの使い方2
STEP
自分のサイトで使いたいWebフォントを選ぶ

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

ぺん

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

Google Fontsの使い方3

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

Google Fontsの使い方4

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

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

STEP
「select this style」を選択

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

Google Fontsの使い方5

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

Google Fontsの使い方8

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

Google Fontsの使い方6

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

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

サイト全体にCSSを適用

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

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

ぺん

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

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

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

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

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

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

STEP
「<link>」を選択する
Google Fontsの使い方-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
「高度な設定」を選択する
高度な設定
SWELL カスタマイズメニュー
STEP
<head>タグに「Webフォント読み込み用link要素」を登録
headタグにフォント読み込み用link要素を追加する

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

ぺん

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

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

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

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

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

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

Google Fontsの使い方-link

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

Webフォント指定用CSS

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

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

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

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

メニュー(PC)

SWELLカスタマイズ-Webフォント使用例-PCメニュー

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

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

メニュー(スマホ)

SWELLカスタマイズ-Webフォント使用例-スマホメニュー

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

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

記事タイトル

SWELLカスタマイズ-Webフォント使用例-タイトル

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

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

記事目次

SWELLカスタマイズ-Webフォント使用例-目次

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

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

ヘッダー<H1~H6>

SWELLカスタマイズ-Webフォント使用例-ヘッダー

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

ぺん

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

.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>

SWELLカスタマイズ-Webフォント使用例-記事本文

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

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

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

ウイジェット(サイドバー)

SWELLカスタマイズ-Webフォント使用例-ウイジェット

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

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

CSSを登録する

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

STEP
WordPress管理画面から「外観」>「カスタマイズ」を選択する
ワードプレス、外観、カスタマイズメニュー
STEP
「追加CSS」を選択
追加CSS
STEP
追加CSSに設定したいスタイル定義を登録して「公開」ボタンをクリック
追加CSS

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

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

>>WordPressのCSS(スタイルシート)の設定方法

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

特定の記事のみCSSを適用

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

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

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

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

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

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

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

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

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

STEP
「@import」を選択する
Google Fontsの使い方7

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

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を登録して、記事を更新する。
SWELL_記事のカスタムCSS設定
SWELLの記事編集画面

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

まとめ

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

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

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

  • サイト全体にWebフォントを利用
  • 一部のページのみでWebフォントを利用
SWELLカスタマイズ-Webフォントの使い方

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

よかったらシェアをお願いします!
目次