日本語表示のために Google Web Font ってやつを実装する

WordPress で運用するブログを始めると、最初にぶち当たる課題!?が、表示される日本語フォント・・・というのが私個人の悩みです。多くの「テーマ」が海外で開発されているため、日本語フォントの設定がない!個人差がありますから、それほどこだわる必要はないのでしょうけど、私個人はウェブページのフォントが嫌いなものであると内容の良し悪しに関係なくスキップしてしまうので、ブログの基本として最重要事項なんです。

といっても個人的な好みだけで設定するのも如何なものか・・・

本ブログのテーマである「Wellington」のフォントも美しいとは思うのですが、何せ日本語の設定ではありませんから、多くの方のブラウザーではどんな風に見えているのか想像できません。ただ、コードを確認すると「Google Web Font」の中の「Gudea」が適用されているので、これはこれで残そうかな、と考えています。

早速ですが、先ずは本ブログに実装したい日本語フォントを決めますが、どうせ実装するのであれば 2017 年のトレンドに合わせておきたい。そこで、公開されている投稿記事「2016-17年最強の Font Family 設定 [ゴシック体] – ミルログ」を参照しながら、以下のコードを「子テーマ」のスタイルシート(style.css)へ記述しました。

*--------------------------------------------------------------
# 1.0 - Normalize
--------------------------------------------------------------*/
html {
font-family:'Noto Sans JP', '游ゴシック  Medium', meiryo, -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%; }

上記のコードの「font-family」の最初に記述されている「Noto Sans JP」が「Google Web Font」です。これで、ブログ全体に上記のフォントが適用されるはずですが、それと同時に各ウェブページのヘッダー(<head>~</head>で囲まれている部分)に以下のコードを挿入する必要があります。

<link rel='stylesheet' id='noto-sans-ja-site-css' href='//fonts.googleapis.com/earlyaccess/notosansjp.css' type='text/css' media='all' />

詳細は参照サイト「Webフォント「Google web fonts」の使い方・実装手順メモ | OZPAの表4」に説明されています。

本ブログは、テーマに ThemeZee が提供する「Wellington」を適用しているのですが、実はプラグインとして「ThemeZee Toolkit」というのが提供されていて、このプラグインを有効化することで、ヘッダーにオリジナルのコードを挿入することができるようになるので、単純にこの方法をとることにしました。

【追記:2017年10月15日】
約 1 か月間、色々と試行錯誤しながら「Web フォント」の適用のために「Wellington」のプラグイン「ThemeZee Toolkit」を利用していました。Header や Footer 部分にオリジナルのコードを挿入することができるようになるのですが・・・結局は、「Web フォント」を挿入するためだけにプラグインを利用するってどうなの!?って疑問が湧いてきて・・・

結論としては、header.php へ「Web フォント」を適用するために以下のコードを挿入して、「子テーマ」として扱うことにしました!

<link rel='stylesheet' id='noto-sans-ja-site-css' href='//fonts.googleapis.com/earlyaccess/notosansjp.css' type='text/css' media='all' />

この方が解決策としてすっきりするし、何よりもプラグインからの負担を軽減できるような気がしますから。実際に header.php の「<head>~</head>」の部分を引用しておきます。

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel='stylesheet' id='noto-sans-ja-site-css' href='//fonts.googleapis.com/earlyaccess/notosansjp.css' type='text/css' media='all' />
<?php wp_head(); ?>
</head>

上記、下から 3 行目の部分が新たに追加したコードになります。

参照画像:「コーディング中の画面(index.php)|ぱくたそフリー写真素材」より

返信を残す

メールアドレスが公開されることはありません。

スパム対策にご協力を。下記、空欄を埋めて下さい。 *