WordPressでフォントを変更する方法

公開: 2021-04-06

サイトをカスタマイズしてタイポグラフィを微調整しますか？ この記事では、WordPressのフォントを変更して、サイトにプロフェッショナルでスタイリッシュな外観を与える方法を紹介します。

ウェブサイトのタイポグラフィが重要です。 それはあなたのサイトに特定のスタイルを与えるだけでなく、ユーザーエクスペリエンスを作り上げたり壊したりする可能性もあります。 フォントがユーザーフレンドリーでない場合、訪問者はサイトを離れる可能性が高くなります。

使用するタイポグラフィは、サイトと通信しようとしているものと一致している必要があります。 あなたのサイトはコンサルティングサービスを販売していますか、それとも写真のウェブサイトですか？ ご想像のとおり、これら2つのWebサイトで使用されるテーマとフォントはまったく異なります。

GoogleFontsライブラリ内で使用できるいくつかのフリーフォントを見ることができます。 Proxima-Novaのようなプレミアムフォントをお探しの場合は、AdobeのTypekitをチェックする必要があります。 どちらのフォントライブラリにも、ビジネスに適した多くのユーザーフレンドリーなフォントが付属しています。

WordPressでフォントを変更する方法

WordPressでフォントを変更する方法はいくつかあります。

  1. WordPressのデフォルトオプション（Gutenberg / Classic Editor）
  2. CSSを使用して手動で
  3. 専用プラグインを使用する
  4. 独自のフォントをホストする
  5. Webフォントの統合

このガイドでは、サイトに最適な方法を選択できるように、各方法を段階的に説明します。

1）WordPressのデフォルトオプション

デフォルトでは、WordPressには、タイポグラフィをカスタマイズするための2つのオプションがあります。Gutenbergを使用するか、Classicエディターを使用するかです。

1.1）グーテンベルクと

WordPressの最新バージョンには、まったく新しいエディターであるGutenbergエディターが付属しています。 これは、いくつかのブロックが付属し、非常に使いやすい高度なツールです。

フォントを変更するには、投稿またはページを開き、変更するテキストを選択します。

段落ブロック

右側に、タイポグラフィオプションが表示されます。

段落フォント

そこで、フォントサイズを変更するためのいくつかのオプションが表示されます。

  • ディフォルト
  • 小さい
  • 中くらい
  • 大きい
  • 巨大
  • カスタム

これらの事前定義されたサイズのいずれかを選択するか、カスタムサイズを追加できます。 たとえば、フォントサイズとして20pxを選択すると、エディターに変更が表示されます。

カスタムフォントサイズ

このようにして、ブロックを簡単に変更し、カスタムフォントサイズをブロックに割り当てることができます。

1.2）クラシックエディタの使用

クラシックエディタを介してタイポグラフィを管理する場合は、Advanced Editor Tools（TinyMCE Advanced）プラグインをインストールしてアクティブ化する必要があります。

高度なエディタツールプラグインをインストールする

プラグインをアクティブにしたら、コンテンツエディタを開くと、いくつかの追加ツールが表示されます。

高度なエディタツール

ドロップダウンから、フォントの種類とサイズを変更できます。 サイトをカスタマイズするために選択できるGoogleFontsとサイズがいくつかあります。

Tinymceフォントの統合

これらのオプションを使用すると、任意の段落を選択し、ドロップダウンから任意のフォントとサイズを選択できます。

2）カスタムCSSコードを使用して手動で

WordPressでフォントを変更する別の方法は、カスタムCSSコードを使用することです。 デフォルトでは、テーマにはサイト全体に適用される特定のフォントサイズが付属しています。 ただし、サイトに異なるスタイルを与えるためにそれらをカスタマイズしたい場合があります。

これを行うには、まず、WordPressダッシュボードで[外観]> [カスタマイズ]> [追加のCSS]に移動します。 このセクションでは、カスタムコードを追加し、サイトを編集できます。

本文のフォントを変更する

たとえば、サイト全体の本文のフォントサイズを16ピクセルに変更するには、次のCSSコードを使用する必要があります。

 body { font-size : 16px; }

文字の大きさを変える

段落フォントを変更する

同様に、段落のフォントサイズを16ピクセルに調整する方法を探している場合は、次のCSSコードを使用する必要があります。

p {
 font-size : 16px;
}

段落フォント

見出しフォントをカスタマイズする

さらに、見出しのフォントサイズを変更する必要がある場合は、次のコードを使用できます。

.entry-content h2 {
 font-size : 36px;
}

.entry-content h3 {
 font-size : 30px;
}

.entry-content h4 {
 font-size : 26px;
}

.entry-content h5 {
 font-size : 22px;
}

.entry-content h6 {
 font-size : 20px;
}

CSSを使用してフォントサイズを変更する

これらは単なる例ですので、必要に応じてフォントサイズを調整してください。 カスタマイザーを使用してこれらの変更を行うと、右側に変更が反映されていることがわかります。

カスタマイズに満足したら、変更を保存して[公開]を押します。

更新を公開する

フォントファミリーを変更する

さらに、サイト全体でフォントファミリを変更するには、次のコードを使用できます。

 * {font-family： "Verdana"、Verdana、sans-serif}

アスタリスク（*）はサイト全体に変更を適用するため、特定のページまたは投稿に変更を適用するだけの場合は、コードから削除してください。 CSSフォントの詳細については、このサイトを確認してください。

さらに、フォントスタイルを変更することもできます。 たとえば、見出し2と3を斜体にする場合は、次のコードを使用します。

 h2, h3 { font-style : italics ; }

テーマに同様の変更を適用する場合は、子テーマのstyle.cssファイルに直接コードを記述できます。 これによりサイト全体に変更が適用されることに注意してください。続行する前に、サイトの完全バックアップを作成してください。

3）プラグイン付き

専用のプラグインを使用してWordPressのフォントを変更することもできます。 このセクションでは、GoogleFontsをサイトに統合する方法を紹介します。 最初に行う必要があるのは、Easy GoogleFontsプラグインをインストールしてアクティブ化することです。

WordPressでフォントを変更する-簡単なGoogleフォントをインストールする

その後、Webサイトのフォントを変更できます。 [外観]> [カスタマイズ]に移動し、カスタマイザーからWebサイトのタイポグラフィを制御できるようになります。 左側に、タイポグラフィと呼ばれる新しいカスタマイズオプションが表示されます。

WordPressのフォントを変更する-WordPressカスタマイザー

それを選択すると、段落と見出しのタイポグラフィ全体を変更するためのいくつかのオプションを含む画面が表示されます。

段落のフォントを変更したい場合は、[フォントの編集]オプションを開きます。

段落フォントを選択

そこから、次を変更できます。

  • スクリプト/サブセット
  • フォントファミリー
  • フォントの太さ
  • テキスト装飾
  • テキスト変換

フォントの外観を変更する必要がある場合は、次のタブに移動して変更できます。

  • フォントの色
  • 背景色
  • フォントサイズ
  • 行の高さ
  • 文字間隔

フォントの外観

最後に、[ポジショニング]タブから、次のことをカスタマイズできます。

  • マージン
  • パディング
  • 国境
  • 境界半径
  • 画面

フォントの配置

フォントの変更

これらのカスタマイズオプションは、タイポグラフィを次のレベルに引き上げるのに最適です。 たとえば、WordPressサイトのフォントファミリを変更するとします。 [スタイル]タブから、使用するフォントを選択します。

フォントファミリー

特定のフォントファミリを念頭に置いている場合は、検索機能を使用できます。 このデモでは、WorkSansフォントを使用します。

仕事サンセリフフォントファミリー

WordPressカスタマイザーを使用してこれらの変更を行うため、すべての更新がライブプレビューに表示されます。 たとえば、デフォルトのテーマフォントをWork Sansに変更すると、変更内容をリアルタイムで確認できます。

作業サンセリフフォントがアクティブ化

同様に、フォントの太さ、テキストの装飾、変換、および見出しを変更することもできます。

段落フォントのカスタマイズが完了したら、見出し1のフォントオプションに移動します。 リストから任意の見出しを選択できますが、このチュートリアルでは、見出し1に焦点を当てます。

見出し1のフォントオプション

以前と同じように、フォントファミリを変更します。 この場合、RobotoSlabを選択します。

見出しフォント

この簡単な方法に従うことで、段落と見出しのフォントを変更できます。 このプラグインにはほとんどのGoogleFontsが統合されているため、選択できるオプションがたくさんあります。 さらに、スタイリングのカスタマイズオプションは非常に使いやすく、すべてのユーザーがプロセス全体にアクセスできるようになっています。

4）独自のフォントをホストする

ローカルコンピューターにカスタムフォントがある場合は、それらをWebサーバーでホストできます。 このセクションでは、WordPressで独自のフォントをホストし、タイポグラフィを変更する方法を説明します。

これを行うには、Webサーバーのファイルマネージャーにアクセスしてカスタムフォルダーを作成し、フォントをアップロードする必要があります。 最も人気のあるWordPressホスティング会社のいずれかを使用している場合は、おそらく使いやすいcPanelにアクセスできます。 または、KinstaやWP Engineなどのマネージドホスティングサービスを使用している場合は、FileZillaなどのFTPクライアントまたは専用ファイルマネージャープラグインを使用する必要があります。

このデモでは、ステージング環境を使用するため、コアファイルの変更とカスタムファイルのアップロードは非常に簡単です。

フォントをテーマフォルダに直接アップロードする前に、管理を容易にするために、 fontsという名前の新しいフォルダを作成する必要があります。 次に、すべてのカスタムフォントをこのフォルダーにアップロードして、簡単にアクセスできるようにします。

フォントフォルダ

フォルダを作成したら、それを開きます。 ここで、カスタムフォントファイルをアップロードします。

次に、使用する予定のフォントを見つける必要があります。 このデモでは、Google FontsのフォントファイルであるLatoを使用しますが、任意のフォントを選択できます。

ラトウェブフォント

フォントを選択すると、専用ページにリダイレクトされ、そこに[ファミリーのダウンロード]ボタンが表示されます。

フォントファミリーをダウンロード

そのボタンを押すと、フォントファミリが.zipファイルとしてコンピュータにダウンロードされます。 それを解凍し、ファイルをフォントフォルダにアップロードします。

アップロードされたフォント

それが最初のステップです。 それでは、さらに一歩進んで、フォントをテーマに統合する方法を見てみましょう。

フォントをCSSと統合する

これで、カスタムCSSを少し使用して、このフォントとテーマの統合を開始できます。 WordPressカスタマイザーを開き、[追加のCSS]セクションに移動して、CSSコードを下からコピーします。

 @font-face { font-family : 'Lato' ; src : url ( “fonts/Lato-Medium.ttf” ) format ( 'woff' ) ; /* medium */ font-weight : normal ; font-style : normal ; } @font-face { font-family : 'Lato' ; src : url ( “fonts/Lato-Bold.ttf” ) format ( 'woff' ) ; /* medium */ font-weight : bold ; font-style : normal ; }

CSSコードを見ると、3つの主要なことが言及されていることがわかります。

  • フォントファミリー
  • ソースURL
  • フォントの太さ

このCSSコードをカスタマイザーに貼り付ける場合、選択したフォントに応じていくつかのセクションを更新する必要があります。 まず、フォントファミリを更新する必要があります。 私たちのコードでは、Latoはフォントファミリであるため、選択したフォントに置き換える必要があります。 フォントファミリーはヘッダーにあります。

WordPressでフォントを変更するフォントファミリーを探す

その後、フォントへのパスを調整する必要があります。 上記の手順を実行した場合は、 fontsというフォルダー内にフォントファイルをアップロードしています。 したがって、行src : url ( “fonts/Lato-Bold.ttf”をfonts / your-font-name.ttfに変更するだけで、準備は完了です。

さらに、必要に応じてフォントの太さを変更できます。 段落にフォントを使用している場合は、通常のフォントの太さが機能しますが、値を変更することもできます。

ワードプレスラトフォントcssでフォントを変更します

さらに、次のCSSコードを使用して見出しフォントを変更できます。

 h1 { font-family : 'Lato' , Georgia , serif ; }

を使用してワードプレスラトフォントのフォントを変更します

また、段落フォントを変更する場合は、次のCSSコードを使用してください。

p {
font-family : 'Lato' , Georgia , serif ;

}

ワードプレスラト段落フォントのフォントを変更します

一方、Webサイト全体のフォントを変更する必要がある場合は、次のCSSコードを使用してください。

body {
font-family : 'Lato' , Georgia , serif ;

}

ワードプレスラトボディフォントのフォントを変更

このようにして、WordPressでフォントを簡単に変更できます。 ご覧のとおり、これは初心者向けの方法であり、コーディングの知識に関係なく簡単に適用できます。

5）Webフォントの統合

Webフォントの統合は、WordPressでフォントをカスタマイズするもう1つの簡単な方法です。 サーバーでフォントをホストする代わりに、独自のリンクを介してサードパーティのフォントを呼び出し、フォントを提供します。 Webフォント統合の良い点は、フォントを手動でホストしたり、FTPソフトウェアに依存したりする必要がないことです。

Webフォントの統合については、まずGoogle Fontsに移動し、好みのフォントとスタイルを選択します。

WordPressでフォントを変更するフォントスタイルを選択する

右側に、フォントを埋め込むためのコードが表示されます。 それをコピーします。

WordPressフォントリンクコードのフォントを変更する

この場合、フォントコードは次のとおりです。

 <link rel = "preconnect" href = "https://fonts.gstatic.com">
 <link href = "https://fonts.googleapis.com/css2？family = Spartan ＆ display = swap" rel = "stylesheet">

次に、テーマのfunctions.phpファイルを編集してフォントを呼び出す必要があります。 ただし、その前に、コードを調整する必要があります。 必要なのはフォントファミリのURLだけです。この場合は次のとおりです。

https://fonts.googleapis.com/css2？ 家族=スパルタン

URLを取得したら、テーマのfunctions.phpファイルを開きます。 子テーマまたはプラグインを使用して、テーマのコアファイルを変更できます。 次に、次のコードを貼り付けます。

 function quadlayers_add_google_fonts ( ) { wp_register_style ( 'googleFonts' , 'https://fonts.googleapis.com/css2?family=Spartan' ) ; wp_enqueue_style ( 'googleFonts' ) ; } add_action ( 'wp_enqueue_scripts' , 'quadlayers_add_google_fonts' ) ;

注：選択したフォントでURLを変更してください。 Functions.phpファイルの編集

ファイルを更新すると、フォントがWebサイトに正常に統合されます。 これで、CSSコードを使用してフォントを指定できます。 以前と同様に、本文のフォントを変更するには、次のコードを使用できます。

body {
font-family : 'Spartan' , Georgia , serif ;

}

その後、Googleフォントに従ってフォントファミリーを更新すれば完了です。

WordPressでフォントを変更するさまざまな方法を見てきました。 しかし、それだけではありません。 さらに一歩進んで、フォントをさらにカスタマイズすることもできます。

WordPressにカスタムフォントを追加する方法

フォントを変更することは良いスタートですが、競合他社から目立ち、独自のWebサイトを作成したい場合は、サイトにカスタムフォントを追加することをお勧めします。 GoogleFontsをWordPressインストールと統合する方法は4つあります。

  • 専用フォントプラグイン付き
  • 関数.phpファイルを変更する
  • header.phpファイルを編集する
  • style.cssファイル経由

これらの各方法を使用してサイトにカスタムフォントを追加する方法の詳細については、完全なガイドをご覧ください。

ボーナス：特定の領域でテーマフォントを変更する方法

サイト全体でフォントを変更する代わりに、特定の領域に変更を適用できます。 これを行うには、フォントを変更するページを右クリックして、[検査]を選択します。

要素を検査します

右側に新しいコンソールが開きます。

要素ツールの検査

要素の上にマウスを置くと、各要素の正確なCSS値を確認できます。

要素のcssコードを検査します

この場合、タイトルフォント（h1）を変更するため、CSSクラスはentry-titleになります。

WordPressのエントリータイトルのフォントを変更する

次に、WordPressダッシュボードで[外観]> [カスタマイズ]> [追加のCSS]に移動し、次のCSSコードを貼り付けて投稿タイトルのフォントを変更します。

注：使用するフォントは、すでにサイトに統合されている必要があります。

 .entry-title { font-family: 'Lato', Georgia, serif; }

Webサイトで使用するフォントでコードを調整するだけです。

それでおしまい！ このようにして、特定の領域のフォントを簡単に変更できます。 正しいCSSクラスを使用していることを確認してください。そうしないと、機能しません。

フォントの色を変更する方法

フォントを変更するだけでなく、フォントの色を変更して独自のサイトを作成し、訪問者により良いユーザーエクスペリエンスを提供することもできます。 良いニュースは、プラグインを使用せずにそれを達成できることです。

簡単なCSSコードを使用してサイトのフォントの色を変更する方法を見てみましょう。

次のようないくつかの見出しがあるページがあるとします。

quadlayersデモ投稿

見出しの色を変更するには、まず、適切なCSSクラスを見つける必要があります。 たとえば、h2フォントの色を変更するには、クラスを右クリックして[検査]を押してクラスを見つける必要があります。

エントリーコンテンツh2

この場合、CSSクラスは.entry-contenth2です。

その後、WordPressカスタマイザーを開き、[追加のCSS ]セクションに移動して、次のCSSコードを貼り付けます。

 .entry-content h2 { color : #f542f5 ; }

h2の色を変更する

ご覧のとおり、見出し2の色が赤に変わります。

このようにして、すべての見出しを変更することもできます。 あなたがする必要があるのは、h2をあなたの好みの見出しタグに置き換えることです。

または、段落フォントを変更する場合は、次のCSSコードを使用します。

 .entry-content p { color : blue ; }

段落の色

コードをベースとして使用し、サイトの各セクションに必要な色を選択します。

それでおしまい！ これにより、フォントの色を簡単に変更できます。

ウェブサイトや画像からフォントを識別する方法

Webを閲覧しているときのもう一つの興味深いオプションは、Webサイトと画像の両方からフォントを識別できるようにすることです。

サイトで使用されているタイポグラフィを知るには、さまざまな方法があります。 最も簡単な方法は、ブラウザの検査ツールを使用することです。 気に入ったフォントが見つかったら、そのフォントを含むテキストを右クリックして、[検査]に移動します（一部のブラウザーでは、 [Web開発者]> [開発者ツール]に移動する必要がある場合があります）。 要素が強調表示され、インスペクターでスタイルとレイアウトを確認できるようになります。

その後、[計算済み]タブに移動し、Webサイトのフォントが表示される[フォント-ファミリ]フィールドを見つけます。

さらに、WhatTheFontと呼ばれるツールを使用して、画像からフォントを識別できます。 Webサイトと画像の両方からフォントに関する情報を取得する方法の詳細については、フォントの識別方法に関するガイドを確認することをお勧めします。

結論

全体として、サイトのタイポグラフィをカスタマイズすることで、サイトに異なるスタイルを与え、サイトのユーザーエクスペリエンスを向上させて、競合他社との差別化を図ることができます。

このガイドでは、WordPressでフォントを変更するさまざまな方法を見てきました。

  • デフォルトのエディター（グーテンベルクとクラシックエディター）
  • カスタムCSSコード
  • プラグイン付き
  • 独自のフォントをホストする
  • Webフォントの統合

リストで最も簡単な方法は、GutenbergまたはClassicEditorを使用することです。 数回クリックするだけでフォントを変更し、変更をリアルタイムで確認できます。 または、フォントサイズ、スタイル、色をカスタマイズする場合は、CSSコードを使用できます。

もう1つの優れた解決策は、専用のプラグインを使用することです。 コードを記述せずに、カスタマイザーを使用してWebサイトのフォントを変更し、サイトのタイポグラフィを完全に制御できます。

フォントファイルがある場合は、独自のWebフォントをホストすることも良いオプションです。 一方、サーバーでフォントをホストしたくない場合は、Webフォントを統合することでフォントを簡単にカスタマイズできます。 この方法の主な利点は、フォントをホストするか、FTPソフトウェアに依存する必要があることです。 ただし、Webフォントを呼び出すと、サイトでのHTTPリクエストが増える可能性があるため、パフォーマンスと速度の問題を回避するためにリクエストを最適化する必要があることに注意してください。

このガイドをお楽しみいただき、お役に立てば幸いです。 もしそうなら、ソーシャルメディアで共有してください。 その他のチュートリアルとガイドについては、ブログをご覧ください。

サイトのフォントを変更するためにどの方法を使用しましたか？ 追加する必要のある他のメソッドを知っていますか？ 以下のコメントセクションでお知らせください。