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

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

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

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'）;

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_font s '）;

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

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

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

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

この場合、メインフォントはWork Sansになり、h1、h2、h3などのヘッダー要素はカンブリア。

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

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

h1、h2、h3 {
font -ファミリ： 'Cambria'、Times New Roman、セリフ;
}

問題がなければ、サイトの訪問者にはデフォルトのWebフォントが表示されます。私たちの場合、WorkSansとCambriaです。問題がある場合は、バックアップフォントが表示されます。たとえば、この場合はArialやTimes NewRomanです。

2。フォントをホストしてWordPressでフォントを変更する方法

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

GoogleFontsやその他のウェブフォントを使用すると、ローカルでホストされているフォントとして使用するフォントをダウンロードできますが、ライセンスで許可されている場合は、他のフォントをパソコンにダウンロードできます。

次に、wp-content / themes / themenameを使用して、フォントファイルをテーマにアップロードします。

スタイルシートを開き、次のコードを追加します（この場合、Work Sansフォントを使用していますが、独自のフォントに置き換えることができます）：

@ font-face {
font-family： 'Work Sans';
src：url（“ fonts / Work Sans-Medium.ttf”） format（ 'woff'）; / *中* /
font-weight：normal;
font-style：normal;
}

@ font-face {
font-family： 'Work Sans';
src：url（ “ fonts / Work Sans-Bold.ttf”）format（ 'woff'）; / *中* /
font-weight：bold;
font-style：normal;
}

@ font-face {
font-family： 'Cambria';
src：url（ " fonts / Cambria.ttf”）format（ 'woff'）; / *中* /
font-weight：normal;
font-style：normal;
}強い>

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

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

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タイポグラフィをカスタマイズする

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

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