WordPress│好きなWebフォントを使用する方法

2022.07.122024.03.05

レスポンシブに対応するために、フラットデザインがしばらくの間主流です。

サイトの見た目の差をつけるには、フォントもかなり重要になってきます。

サンプルとして本記事の見出し、h2 と h3にWebフォントを適応しています。

好きなフォントを見出しに使うだけでかなり変わりますでの、本記事ではSWELLで好きなフォントを適応する方法を紹介します。

SWELLと書いてますが、他のテーマでも適応可能です。

SWELLで好きなWebフォントを使用する方法

やり方は簡単です。

フォントをテーマ直下に格納して、CSSで読み込み、指定してあげるだけです。

好きなフォントを用意する

まずは使いたいWebフォントを用意します。

今回はGoogleフォントから解星オプティというフォントを用意しました。

サイトからフォントをダウンロードしておきましょう。

KaiseiOpti-Bold.ttf

Google Fonts

Kaisei Opti – Google Fonts Kaisei Opti is a modern style Japanese typeface. When typesetted, it gives a cheerful and breezy impression. To contribute to the project, visit https://github.

フォントの格納

ダウンロードしたフォント（KaiseiOpti-Bold.ttf）をテーマの直下に格納します。

/public_html/motoki-design.co.jp/wp-content/themes/swell_child

サーバーへの格納方法はFTPを使ってアプロードするか、プラグインのFile Managerを使用してください。

CSSの記述

WordPressの管理画面＞外観＞テーマファイルエディター＞ style.cssを開いて、下記のコードを挿入しましょう。

/*Webフォントの読み込み*/
@font-face {
  font-family: kaisei-opti;
  font-style: bold;
  src: url(wp-content/themes/swell_child/KaiseiOpti-Bold.ttf) format("truetype");   
}

/*見出しをWebフォントに*/
h2, h3{
  font-family: "kaisei-opti";
}

以上です。

サンプルとして本記事の見出し、h2 と h3にWebフォントを適応しています。