[Google Fonts]初めてのGoogleフォント 誰でも簡単に適用できます!

動機・やりたいこと・困っていたこと

日本語に対応しているGoogleフォントはとっても少ないですが、それでもホームページの雰囲気づくり、彩りとしては効果があります。とくに、日本語ではなくアルファベット部分は選択肢も多く、ホームページのイメージフォントは重要。

 

概要

日本語版WordPressの日本語(マルチバイト)対応機能を強化するプラグインです。WordPressの管理画面上からWordPressサイトを手軽にバックアップできるプラグインです。すでに代替のバックアップ機能を持っているプラグインを利用している場合を除いて必ず導入しておきたい機能です。

<プラグインキャプチャ>

  • プラグイン名:
  • 公式サイト:

 

設定・カスタマイズのメモ

初期設定・解決方法・対処方法

  1. 使いたいフォントを探す。まずはここ ↓ から好きなフォントを探し出す。
  2. Google Fonts
  3. たくさんあるので、気になるフォントは「+」をポチポチ押してお気に入りにしておく。
  4. 画面右下に「Selected font」のような部分があるので、そこから後で開くことができます。マイナス「ー」マークをクリックすると選んだフォントを確認することができます。
  5. ホームページで使うにはまずGoogle Fontsをつかいます!という宣言を加えます。これだけではまだフォントは変わりません。
    1. header.phpのheadタグで囲まれている中のどこかに貼り付ける。私の場合はAll in one seoのヘッダー設定箱。
    2. 「@import」タブをクリックして表示されるコードをコピー。CSSファイルのどこかに貼ればいい。=外観>カスタマイズ>追加CSSに貼ることで、phpの直接編集は不要。
  6. 変更したい文字列にフォントを適用する。変更したい文字列のCSSの「font-family」のパラメータを変更する。

 

スニペット対応・ファイル直接修正部分

スニペットからHeadに宣言を埋め込むこともできます。(PHP)

add_action( 'wp_head', function () { ?>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Allura|Ruthie&display=swap');
  </style>
<?php } );

使うときははこんな感じで使う。(CSS)

.site-title a { font-family: 'Allura', cursive; font-family: 'Ruthie', cursive; } 

 

プラグインの特徴・機能・感想

その他・特記事項

フォントは<p>などの本文フォントには使わず、タイトルや装飾が必要な一部分にのみ適用すると、読みやすいです。

 

以上