MENU
Wordpress制作を学ぶためのブログ
Nino-Blog
Nino-Blog
  1. ホーム
  2. wordpress
  3. 【WordPressカスタマイズ】サイトのフォントを変更する方法

【WordPressカスタマイズ】サイトのフォントを変更する方法

2025 1/28
wordpress カスタマイズ
2021年8月4日2025年1月28日

皆さんこんにちは!
ニノです。

今日はWebフォントについてご紹介します。
WordPressでウェブサイト制作をしていてフォントを変えたいと思ったことはないでしょうか?

サイトに合ったフォントを使用することでサイトが発信している情報がユーザーに伝わりやすくなるといった効果もあります。

\ NinoBlogのサービス紹介です! /

実績100件以上!集客できるホームページ制作します SEO対策とデザインで集客力UP!更新可能なホームページを!
目次

フォントを設定するメリット

Googleやsafariなどブラウザによって使用されているフォントが異なります。
フォントのカスタマイズをすることにより、どのブラウザで表示した際にも同じ見た目になると言うメリットがあります。
WordPressでフォントを設定する方法は三つあります。

  1. プラグインを使用してフォントを変更
  2. Webフォントを読み込みフォントを変更
  3. サーバー上にフォントファイルを置きフォントを変更

WEBフォントをオススメする理由としては作業が簡単で、今後のメンテナンスも楽に行えるからです。
プラグインを使用するとサイトの表示速度が遅くなると言うデメリットもありますので、カスタマイズできる範囲に関してはプラグインを使用しないことをお勧めします。

WEBフォントの設定方法

WEBフォントでよく使用される「Googleフォント」を設定していきます。
設定方法としては

  1. Googleフォントを選ぶ
  2. Header.phpにコードを追記
  3. CSSでフォントを適応

このステップで進めていきます。

1、サイトに適応したいGoogleフォントを選択する

まずはGoogleFontsにアクセスします。
すると以下の画像の様にフォントが並んでいます。

この中から、自分のサイトに使用したいフォントを選択してください。

フォントを選んで「Click!」しましょう。
するとフォントの詳細ページに移ります。

次に「Select This Style」を「Click!」しましょう。
すると画面右側にSelected Familyと言うエリアが表示されます。

<link>と@importのチェックがあるので<link>にチェックを入れる。
そのしたのコードをコピーする。

2、Header.phpにコードを追記

コピーしたコードをHeader.phpに貼り付けますので管理画面に移動。
外観→テーマエディターからheader.phpを選択する。(この際、子テーマを選択していることをお忘れなく!)

 header.phpの中の<head>要素の中に上のGoogle Fontでコピーしたコードを貼り付ける。

その後もう一度GoogleFont に戻る。
今度は先ほどコピーした下のコードを「Copy!」

次にGooglefontを離れ、管理画面→外観→カスタマイズ→追加CSSへと進む

3、CSSでフォントを適応

管理画面→外観→カスタマイズ→追加CSSに進むとそこで*{}を記述し、「{」と「}」の間に先ほどGoogle Fontでコピーしたコードを貼り付ける。
(ちなみにCSSで*(アスタリスク)を適応範囲に指定するとサイト内の全てに指定がかかります。(全称セレクタ))
以上で設定は終わりです。
お疲れ様でした。

『Before』

『After』

文字がスタイリッシュになった感じがしますね。
とても簡単に設定できますので、皆さんも一度チャレンジしてみてください。

注意事項

注意すべき点としては、「子テーマ」に記述すると言うことです。
親テーマに記述するとアップデートの際に上書きされてしまいます。
(カスタマイズが水の泡、、。)

また今回のカスタマイズをする前にコードを記述したheader.phpをバックアップしておきましょう。

Nino-BLOGのサービス紹介

実績100件以上!集客できるホームページ制作します SEO対策とデザインで集客力UP!更新可能なホームページを!
Wordpressの修正・カスタマイズを代行します 画像や文章の追加・修正・ページの追加・アップデートなど
wordpress カスタマイズ
二宮 旬平
WEBデザイナー
はじめましてWEBデザイナーの二宮と申します。
このサイトでは、Wordpressについて実際に手を動かしながら学べるよう日々投稿を行なっております。
HP制作実績はこちらから
キーワード検索
人気記事
  • 【完全解説】WordPressでヘッダーを自作してみよう!(コーポレートサイト編)
    5430
  • 【コピペOK】ContactFrom7でお問い合わせフォームを設置する方法
    5147
  • 【超簡単】ContactForm7でお問い合わせ確認画面を設置してみよう
    4287
  • 【自作テーマ開発】_s(underscores)でオリジナルブログサイトを作ろう!
    2409
  • 【WordPress自作テーマ開発③】トップページを作ろう
    2324
カテゴリー
  • SEO対策
  • wordpress
    • テーマ作り
  • カスタマイズ
  • ニュース
  • ライティング
  • ライフハック
  • 副業
  • 未分類
  • 資格
アーカイブ
  • 2023年7月 (3)
  • 2023年2月 (3)
  • 2022年4月 (1)
  • 2022年2月 (1)
  • 2022年1月 (7)
  • 2021年10月 (1)
  • 2021年9月 (3)
  • 2021年8月 (8)
  • 2021年7月 (2)
  • 2021年2月 (9)
  • 2021年1月 (5)
↓Nino-blogのサービス紹介
実績100件以上!集客できるホームページ制作します SEO対策とデザインで集客力UP!更新可能なホームページを!
目次
  • HOME
  • プライバシーポリシー
  • 免責事項
  • お問い合わせ

© 2020 nino-blog

目次