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

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

WordPress│好きなWebフォントを使用する方法 2024 9/05 WordPressカスタマイズ 2022.07.122024.09.05

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

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

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

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

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

目次

著者

motoki

WEB制作をしているデジタルノマド WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社 カスタマイズの依頼・相談

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フォントを適応しています。

まとめ

見出し等にWebフォントをつかうと、サイトの雰囲気がかわりますね。

是非、本記事を参考にしてWebフォントを使ってみてください。

WordPressカスタマイズ
  • URLをコピーしました！

WAZAの有料記事のサブスクリプションも開始しました。

あわせて読みたい アフィリエイト付き！有料記事のサブスクリプションについて WAZAでは特に有益な記事は有料記事とさせていただいてます。 本記事では有料記事をリストでまとめました。 また有料記事の読み放題のサブスクリプション、そして有料記...

サービス

Service

WordPressサイトのカスタマイズのサービスに関心がありましたら、ぜひ詳細をご覧ください。

詳細を見る 全サービス一覧

関連記事

  • WordPress│複数の著者（ユーザー）を記事一覧に登録する方法
  • WordPress│pre_get_posts フィルタで記事一覧表示を変更する方法
  • WordPress│管理画面にカスタムフィールドの一覧･編集機能を作成する方法
  • WordPress│指定範囲にだけGoogleスプレッドシートの表をiframeで埋め込む方法
  • WordPress│情報をRSS化して別サイトでも動的に参照する方法
  • WordPress│固定記事で使われているテンプレートを洗い出す方法
  • WordPress│本文で使われているショートコードを洗い出す方法
  • WordPress│ギャラリーブロックをカルーセル付スライダー表示にする方法│Swiper
  • WordPress│エフェクト用の画像2枚だけでループアニメーションを作成する方法
  • WordPress│投稿記事を階層化する方法
  • WordPress│コードだけでSMTPを設定する方法│PHPMailer
  • WordPress│多言語サイトのhreflangタグを動的に出力する方法
📎📎📎📎📎📎📎📎📎📎
BOT