WordPressでWebフォントに変更する
コンテンツ
フォントの変更
このブログはAWS（Amazon Web Services）上のUbuntu Server Ver16.04 LTSにWordpressをインストールして書いている。
またテーマはHuemanを使っていて”全般 デザイン設定”のフォントは”Ubuntu”を指定していた。
ただUbuntuフォントは英文字には適用されるのだけれども日本語はWidnowsではメイリオ、Androidタブレットやスマートフォンではtakao（ubuntu 16.04でのデフォルト）フォントと端末によってフォントが異なって表示されていた。
WebフォントのGoogle Fontsの日本語が試験的に公開されていたので（今は正式版になっているようです）早速試してみることにした。
Webフォントとは
Webフォントはフォントデータをサーバー側に持つのでデバイスやOSに依存せずに表示することができる。
上記の様にパソコンとタブレットでフォントが違うみたいな事が起きない。
ただ最初にフォントデータをサーバーから読み込む必要があるので、漢字のある日本語フォントの様に容量の大きなフォントは初期表示まで多少時間がかかってしまうとの事。
しかし今回Googleのサーバーからフォントを読み込んだが体感的には全然問題が無かったので変更してみることにした。
またフリーの日本語フォントも、Webフォントに変換して自サーバーにアップロードすれば同じ様に扱うことができる。
フリーフォントへの変更も試してみたのだが、それは別記事とする。
WordPressでフリーフォントを試してみた時の記事はこちら
手順
大まかな手順は以下の通り
- Google Fonts + 日本語にてフォントを選ぶ
- header.phpにてWebフォントを読み込む設定をする
- style.cssでフォントを指定する
フォントを選ぶ
Google Fonts + 日本語から好きなフォントを選ぶ。
今現在、以下の９種類のフォントを選択することができる。
フォントは「自家製フォント工房」さんのフォントを選んだ。
読みやすかったのとブログの雰囲気に合っている気がしたので。
同じGoogleのWebフォントのNoto Sans JPに変更した。
理由は小さいサイズのフォントはこちらのほうが読みやすかったので変更している。
header.phpの設定
子テーマのheader.phpに修正を加える
header.phpは事前にターミナル（puTTY）で接続して親テーマからコピーをした後、オーナーの変更を行った
cd /var/www/wordpress/wp-content/themes/hueman-child
sudo cp ./../hueman/header.php ./
cd ../
sudo chown -R www-data:www-data hueman-child※ ubuntu OS の場合、www-dataが apache等のWEBサーバーを操作するデフォルトのユーザとグループ
WordPressのメニューから外観ー＞テーマの編集で子テーマのテーマヘッダー（header.php）を選択する。
<head>セクションに上記ページの<link href ・・・～>を貼り付ける。
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">
style.cssの設定
外観ー＞テーマの編集にて子テーマのstyle.cssを呼び出してfont-familyに”Rounded Mplus 1c”を指定する。 ※Huemanの場合
body { font-family: "Rounded Mplus 1c"; }
”body”指定にしたのはHueman（テーマ）だとbodyにしないとフォントが適用されなかったので、Chromeのデベロッパツールで調べてbodyを指定する事にした。
ちなみに他のテーマ（astra）だと
* { font-family: "Rounded Mplus 1c"; }でもいけた。
この辺はテーマによって試行錯誤が必要な模様。
また外観ー＞テーマの編集のStyle.cssに追記していけるパターンと外観ー＞カスタマイズー＞詳細設定（ここはテーマによってメニュー名が異なる）ー＞追加CSSにてfont-familyを指定しないと反映されないテーマもあった。
いずれにしてもキャッシュに残っていると変更しても反映されないのでF5（更新）でのリフレッシュは必須。
Chromeのデベロッパーツール
簡単にChromeのデベロッパーツールについて説明する。
該当のページを表示してF12（Windowsの場合）を押すと右側にデベロッパーツールが表示される。
１の四角矢印のマークをクリックして知りたいテキスト部分をクリックすると（例では「第２スライドのタイトル」）２や３にHTMLが表示される。
この例では”maintitle”というクラスである事が分かるのでこのクラスを指定してフォントを変更する。
最後に
Windowsパソコン、Androidタブレット、スマートフォンで確認した所、全てのデバイスで同じフォントだった。
確認はしていないけどmacやiPadでも同じフォントのはず。
1件の返信
[…] WordPress で Web フォントに変更する | そう備忘録 […]