WordPressサイトにブランディングと個性を加えるための優れた方法は、テーマのフォントを変更することです。

タイポグラフィやその他のバンディング要素は、良い第一印象を生み出し、サイトの訪問者の気分を設定し、ブランドのアイデンティティを確立します。研究^(Studies)によると、フォントは読者の学習能力、情報の想起能力、テキストの記憶能力に影響を与えることがわかっています。

WordPressテーマをインストールした^{(installed a WordPress theme)}ばかりの場合、またはCSSとコーディングの経験がある場合は、 ^(CSS)WordPressのフォントを変更するために使用できるいくつかのオプションを紹介します。

WordPressでフォントを変更する方法^{(How to Change Fonts in WordPress)}

WordPressでフォントを変更するために利用できる主なオプションは3つあります。

• サードパーティのサイトでホストされているGoogleFonts、Fonts.com、Adobe^{( Adobe Edge Web Fonts)} EdgeWebFontsなどのWebフォントを使用します
• ^(Code)Webフォントをテーマにコーディングし、キューに入れます
• サイトでフォントをホスト^(Host)し、テーマに追加します

1.Webフォントを使用してWordPressのフォントを変更する方法^{(1. How to Change Fonts in WordPress Using Web Fonts)}

Webフォントの使用は、フォントファイルをダウンロードしてアップロードするよりも、 WordPressでフォントを変更するためのより簡単で迅速な方法です。^(WordPress)

このオプションを使用すると、変更があるたびにフォントを更新せずにさまざまなフォントにアクセスでき、ホスティングのサーバースペースを占有しません。^{(access a variety of fonts)}フォントは、プラグインを使用するか、サイトにコードを追加することにより、プロバイダーのサーバーから直接提供されます。

^(Make)サイトに選択するWebフォントが、ブランドアイデンティティと一致し、本文テキストが読みやすく、Webサイトの訪問者に馴染みがあり、希望する種類のムードとイメージを伝えていることを確認してください。

WordPressプラグインを使用する^{(using a WordPress plugin)}か、サイトに数行のコードを追加して手動でWebフォントを追加できます。両方のオプションを見てみましょう。

WordPressプラグインを使用してWebフォントを追加する方法^{(How to Add Web Fonts Using a WordPress Plugin)}

選択したWebフォントに応じて、WordPressプラグインを使用してフォントのライブラリにアクセスし、サイトで必要なフォントを選択できます。このガイドでは、Google Fontsを選択し、 ^{(Google Fonts)}GoogleFontsTypographyプラグインを使用しました。

1. 開始するには、 WordPress^(WordPress)管理ダッシュボードにログインし、[Plugins > Add Newを選択します。

1. 検索^{(Google Fonts Typography)}ボックスに「GoogleFontsTypography」と入力し、[今すぐインストール]を選択します^{(Install Now)}。

1. [アクティブ化]^(Activate)を選択します。

1. 次に、Appearance > Customizeに移動して、カスタマイザー^(Customizer)にアクセスします。

1. GoogleFontsセクションを選択します。

1. 次に、リンクをクリックしてフォントの設定を開き、次のように構成します。

• [基本設定]^{(Basic Settings)}で、本文、見出し、ボタンのデフォルトのフォントを設定します。

• [詳細設定]^{(Advanced Settings)}で、サイトのタイトルと説明、メニュー、見出しとコンテンツ、サイドバー、およびフッターを構成します。

• ^(Uncheck)サイトの速度が低下しないように、[フォントの^{(avoid slowing down your site)}読み込み^{(Font Loading)}]セクションで不要なフォントの太さのチェックを外してください。

サイトに正しく表示または機能していないフォントがある場合は、「デバッグ^{(Debugging )}」セクションを使用してトラブルシューティングを行ってください。

1. カスタマイザー^(Customizer)でこれらの設定をテストして、希望どおりに機能していることを確認してから、[公開]^(Publish)を選択します。

注：^(Note)カスタマイザー^(Customizer)で公開を選択するのを忘れると、行ったすべての変更が失われます。

コードを使用してWebフォントを追加する方法^{(How to Add Web Fonts Using Code)}

テーマのコードにアクセスできる場合は、Webフォントをインストールして使用できます。これは、プラグインを追加する代わりの手動の方法ですが、手順に注意深く従えば複雑ではありません。

ただし、 WordPress^(WordPress)テーマディレクトリのテーマまたはカスタマイズされたテーマを使用している場合は、さまざまな手順を実行する必要があります。

WordPressテーマディレクトリからテーマを購入した場合は、子テーマ^{(create a child theme)}を作成してから、style.cssファイルとfunctions.phpファイルを指定します。テーマからスタイルシートと関数ファイルを編集できるため、テーマをカスタマイズすると簡単になります。

1. 開始するには、Google Fontsライブラリからフォントを選択し、+ (plus)アイコンを選択してライブラリに追加します。

1. 次に、サイトに追加するコードが表示されている下部のタブを選択します。[埋め込み]タブの下の[^(Embed)埋め込みフォント^{(Embed font)}]セクションに移動します。Google Fontsによって生成されたコードは、次のようになります。

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

注^(Note)：このガイドではWork Sansを選択したため、選択したものによってフォント名が異なる場合があります。

1. コードのこの部分をコピーします：https://fonts.googleapis.com/css2?family=Work+Sans

これにより、サードパーティのプラグインとの競合を防ぐために、GoogleFontsサーバーからスタイルをキューに入れることができます。^{(Google Fonts)}また、子テーマを簡単に変更できます。

1. フォントをエンキューするには、関数ファイルを開き、次のコードを追加します。（リンクをGoogle Fontsから取得したリンクに置き換え^(Replace)ます）：

function wosib_add_google_fonts（）{
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style（'googleFonts'）;
}

add_action（'wp_enqueue_scripts'、'mybh_add_google_fonts'）;

1. 次のように、将来フォントを追加する場合は、関数または同じ行に新しい行を追加できます。

function mybh_add_google_fonts（）{
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style（'googleFonts'）;
}

add_action（'wp_enqueue_scripts'、'mybh_add_google_fonts'）;

この場合、CambriaフォントとWorkSansフォントの両方をキューに入れました。

次のステップは、テーマのスタイルシートにフォントを追加して、サイトでフォントが機能するようにすることです。

1. これを行うには、テーマのstyle.cssファイルを開き、次のようにWebフォントを使用して個々の要素のスタイルを設定するコードを追加します。

body {
font-family：'Work Sans'、sans-serif;
}

h1、h2、h3 {
font-family：'Cambria'、serif;
}

この場合、メインフォントはWork Sansになり、h1、h2、h3などのヘッダー要素はCambriaを使用します。

完了したら、スタイルシートを保存し、フォントが正常に機能しているかどうかを確認します。そうでない場合は、フォントがスタイルシートで上書きされていないことを確認するか、ブラウザのキャッシュをクリアして再試行してください。

1. 特に古いデバイスを使用しているユーザー、接続が不十分なユーザー、またはフォントプロバイダーに技術的な問題がある場合に、フォントを簡単にレンダリングまたはアクセスできるように、バックアップフォントを用意します。これを行うには、スタイルシートに移動し、CSSを編集して次のように読みます。

body {
font-family：'Work Sans'、Arial、sans-serif;
}

h1、h2、h3 {
font-family：'Cambria'、Times New Roman、serif;
}

すべてが順調であれば、サイトの訪問者にはデフォルトのWebフォント（この場合はWork SansとCambria ）が表示されます。問題がある場合は、バックアップフォントが表示されます。たとえば、ArialやTimesNewRomanなどです。

2.フォントをホストしてWordPressのフォントを変更する方法^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

独自のサーバーでフォントをホストすると、Webフォントのパフォーマンスを最適化できますが、サードパーティのサイトからリソースを取得する代わりに、より安全な方法でもあります。^{(a more secure way)}

Google Fontsおよびその他のWebフォントを使用すると、ローカルでホストされているフォントとして使用するフォントをダウンロードできますが、ライセンスで許可されている場合は、他のフォントをコンピューターにダウンロードできます。

1. 開始するには、フォントファイルをダウンロードして解凍し、サイトにアップロードしてから、スタイルシートにリンクします。この場合、Webフォントの場合のように、functions.phpファイルにフォントをエンキューする必要はありません。Webサイトで使用する前に、アップロードするファイルが.woff形式であることを確認してください。^(.woff)

1. 次に、wp-content/themes/themenameに移動して、フォントファイルをテーマにアップロードします。 
2. スタイルシートを開き、次のコードを追加します（この場合、Work Sansフォントを使用していますが、独自のフォントに置き換えることができます）。

@font-face {
font-family：'Work Sans';
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight：normal;
フォントスタイル：通常; ^{( font-style: normal;)}
}

@font-face {
font-family：'Work Sans';
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight：bold;
フォントスタイル：通常; ^{(font-style: normal;)}
}

@font-face {
font-family：'Cambria';
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight：normal;
フォントスタイル：通常; ^{( font-style: normal;)}
}

注^(Note)：@fontfaceを使用すると、フォントの太字、斜体、およびその他のバリエーションを使用できます。その後、各フォントの太さまたはスタイルを指定できます。

1. 次に、次のように要素のスタイルを追加します。

body {
font-family：'Work Sans'、Arial、sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1、h2、h3 {
font-family：'Cambria'、Times New Roman、serif;
}

WordPressのタイポグラフィをカスタマイズする^{(Customize Your WordPress Typography)}

WordPressでフォントを変更することは、ブランディングとユーザーエクスペリエンスを向上させるための優れたアイデアです。これは簡単な作業ではありませんが、テーマをより細かく制御できます。

このガイドのヒントを使用した手順を使用して、サイトのフォントをカスタマイズ^(Were)できましたか？コメントで教えてください。^(Tell)

How to Change Fonts in WordPress

A grеat way to add some branding and individualism to your WordPress sitе is to change the fonts in your theme.

Typography and other banding elements create a good first impression, set the mood for your site’s visitors, and establish your brand’s identity. Studies have also found that fonts affect readers’ ability to learn, recall information, and memorize texts.

If you just installed a WordPress theme or have some CSS and coding experience, we’ll show you several options you can use to change fonts in WordPress.

How to Change Fonts in WordPress

There are three main options available for you to change fonts in WordPress:

• Use web fonts like Google Fonts, Fonts.com, or Adobe Edge Web Fonts, which are hosted on a third-party site
• Code web fonts into your theme and enqueue them
• Host fonts on your site and add them to your theme

1. How to Change Fonts in WordPress Using Web Fonts

Using web fonts is an easier and quicker way to change fonts in WordPress than downloading and uploading font files.

With this option, you can access a variety of fonts without updating them each time there’s a change, and it doesn’t hog server space on your hosting. The fonts are served directly from the provider’s servers using a plugin or by adding code to your site.

Make sure the web fonts you choose for your site match your brand identity, are easy to read for body text, are familiar to website visitors, and convey the kind of mood and image that you want.

You can add web fonts using a WordPress plugin or manually by adding a few lines of code to your site. Let’s explore both options.

How to Add Web Fonts Using a WordPress Plugin

Depending on the web font you’ve chosen, you can use a WordPress plugin to access the library of fonts and pick out the one you want on your site. For this guide, we chose Google Fonts and used the Google Fonts Typography plugin.

1. To get started, log in to your WordPress admin dashboard, and select Plugins > Add New.

1. Type Google Fonts Typography in the search box, and select Install Now.

1. Select Activate.

1. Next, access the Customizer by going to Appearance > Customize.

1. Select the Google Fonts section.

1. Next, click on the link to open the fonts’ settings and configure them as follows:

• Under Basic Settings, set the default font for your body text, headings, and buttons.

• Under Advanced Settings, configure your site title and description, menu, headings and content, sidebar, and footer.

• Uncheck any unwanted font weights in the Font Loading section to avoid slowing down your site.

If there are fonts on your site that aren’t displaying or working properly, use the Debugging section to troubleshoot.

1. You can test these settings in the Customizer to make sure they’re working the way you want them to, and then select Publish.

Note: If you forget to select publish in the Customizer, you’ll lose all the changes you’ve made.

How to Add Web Fonts Using Code

You can install and use web fonts if you have access to your theme’s code. This is a manual alternative to adding an extra plugin, but it’s not complicated if you follow the steps carefully.

However, there are different steps to take if you’re using a theme from the WordPress theme directory or a customized theme.

If you bought a theme from the WordPress theme directory, create a child theme and then give it the style.css and functions.php file. It’s easier if you have a customized theme as you can edit the stylesheet and functions file from your theme.

1. To get started, select a font from the Google Fonts library, and select the + (plus) icon to add it to your library.

1. Next, select the tab at the bottom where you’ll find the code to add to your site. Go to the Embed font section under the Embed tab. You’ll find the code generated by Google Fonts, which looks something like this:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Note: We picked Work Sans for this guide so the font name may be different on yours depending on what you picked.

1. Copy this part of the code: https://fonts.googleapis.com/css2?family=Work+Sans

This allows you to enqueue the style from Google Fonts servers to prevent conflict with third-party plugins. It also allows for easier child theme modifications.

1. To enqueue the font, open the functions file and add the following code. (Replace the link with the link you get from Google Fonts):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

1. You can add a new line to your function or to the same line if you want to add more fonts in future as follows:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

In this case, we’ve enqueued both Cambria and Work Sans fonts.

The next step is to add the fonts to your theme’s stylesheet to make the font work on your site.

1. To do this, open your theme’s style.css file and add the code to style individual elements with your web fonts as follows:

body {
font-family: ‘Work Sans’, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, serif;
}

In this case, the main font will be Work Sans while header elements like h1, h2, and h3 will use Cambria.

Once done, save the stylesheet and check whether your fonts are working as they should. If not, check that the fonts aren’t being overridden in the stylesheet, or clear your browser cache and try again.

1. Have a backup font in place to ensure that the fonts can be rendered or accessed easily especially for users with old devices, poor connections, or if the font provider has technical issues. To do this, go to the stylesheet and edit the CSS to read as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

If all is well, your site’s visitors will see your default web fonts, in our case Work Sans and Cambria. If there are issues, they’ll see the backup fonts, for example Arial or Times New Roman in our case.

2. How to Change Fonts in WordPress by Hosting Fonts

Hosting fonts on your own servers helps you optimize the performance of your web fonts, but it’s also a more secure way of doing it instead of pulling in resources from third-party sites.

Google Fonts and other web fonts allow you to download fonts for use as locally hosted fonts, but you can still download other fonts to your computer provided the licenses permit you to do so.

1. To get started, download, unzip, upload the font file to your site and then link it in your stylesheet. In this case you don’t have to enqueue the fonts in the functions.php file as you did with the web fonts. Confirm that the files you’re uploading are in the .woff format before using them on your website.

1. Next, go to wp-content/themes/themename to upload the font file to your theme. 
2. Open the stylesheet and add the following code (in this case we’re using Work Sans font but you can replace that with your own fonts):

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

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

@font-face {
font-family: ‘Cambria’;
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

Note: Using @fontface allows you to use bold, italics and other variations of your font, after which you can specify the weight or style for each font.

1. Next, add styling for your elements as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

Customize Your WordPress Typography

Changing fonts in WordPress is a great idea to improve the branding and user experience. It’s not a straightforward task, but you’ll have more control over your theme.

Were you able to customize your site’s fonts using the steps using the tips in this guide? Tell us in the comments.

Related posts

• WordPress siteをあるホストから別のホストに移動する方法

• Microsoft AzureにWordPressをインストールして設定する方法

• Microsoft Azureで恐ろしい高速WordPressを実行する方法

• WordPressにPrivacyを構成する方法およびその理由が重要なのか

• Google Cloud PlatformにWordPressインストールする方法

• 11ステップでWordPressサイトをスピードアップする方法

• 9新しいWordPressインストール用のプラグインが必要

• WordPress Site Secureを作る方法

• WordPressでフッターを編集する方法

• WordPressで効果的な分割テストを実行する方法

• データベースクリーンを通じてWordPressのパフォーマンスを向上させる方法

• Must Have WordPress Yoast SEO Settings 2021

• 8つの無料Premium WordPressテーマをインストールします

• WordPressプラグインのすべての痕跡を削除する方法

• 中小企業のウェブサイトに不可欠な10のWordPressプラグイン

• WordPressと同じくらい良いWixブログを構築する方法

• あなたのポイントを横切るための最高のブログ執筆フォーマット

• WordPressでページを複製する方法

• Wordpressにフローティングサイドバーを追加する方法

• WordPress管理者ログインを見つける方法