こんにちは。
埼玉のフリーランスエンジニアとしです！
この記事では、今使っているテーマのフォントがいまいち読みにくいなぁと思っている人の為に、google fontで無料で提供されている”Noto Sans JP”を簡単に導入する方法をご説明したいと思います。
WEBフォントを導入するメリット
Webフォントを導入するメリットは、環境に依存せず同じフォントで表示することができる事です。
環境に依存せずにというのはどういう事かというと、例えばWindowsとMacの違いです。
よくMacのフォントが綺麗だという話を聞いたり既に思っている方も居ると思いますが、それはヒラギノというフォントを指していると思っていて、そのヒラギノのフォントはMacには標準で入っていますが、Windowsには標準では入っていないのです。
CSSでフォントを指定する際には、優先順位をつけてフォントを指定するのですが、ヒラギノを最優先にして、もしヒラギノがなければMSのフォントという風に代わりのフォントを使うようになります。
しかし、もしWebフォントを導入しているとどうなるかというと、フォントをサーバーから一度ダウンロードした状態でフォントを指定するため、どの機種でも同じフォントを使って表示する事が出来るのです。
これが、一番のメリットですね。
Google fontのページでフォントの取得
Google fontのNoto Sans JPのページに進みます。
このページが表示されたら、右上にある「SELECT THIS FONT」をクリックします。
そうすると、右下の方に「Family Selected」というウィンドウが出てくるので、CUSTOMIZEをクリックします。
CUSTOMIZEの画面になったら、「bold」と「Japanese」にチェックを入れます。
CUSTOMIZEの設定がおわったら、「EMBED」のタブに切り替えます。
そうするとはじめは、「STANDARD」というタブが選択されているので＠IMPORTをクリックします。
画像に①と②と赤枠で囲んでいますが、これらをWordPressのCSSにこれからコピペしていきます。
Noto Sans JPをWordPressに導入
WordPressの管理画面に入ったら、「外観」→「カスタマイズ」をクリックします。
そうすると、左メニューに「追加CSS」という項目が出てくるので、クリックします。
「追加CSS」には先程Google fontで書いてあった①の内容と②の内容を記述します。
記述する内容はこちらです。
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&subset=japanese');
*{
font-family: 'Noto Sans JP', sans-serif;
}②については、アスタリスク（＊）を指定して、かっこ（｛｝）で囲む必要があります。
これで「公開」をクリックすれば完了です。
このカスタマイズ中にフォントがリアルタイムで変更されているのが分かるはずです。
以上で、Noto Sans JPの導入の完了です。
導入する際の注意
Google fontを導入する際に注意しなければいけないのが、ロード時間が掛かるという点です。
ページを表示する際にGoogleフォントにアクセスするために掛かる時間で、若干読み込みが遅くなります。
それでも、WEBフォントなのでサーバーにフォントを用意してローディングするよりはローディングは早いのでそこまで気にすることはありませんが、読み込み時間が遅くなるという事は留意して下さい。
まとめ
Noto Sans JPは日本語フォントでもとても見やすいフォントですのでおすすめです。
また、このGoogleフォントの導入方法が分かると、お気に入りのフォントを見つけて同じ様に設定する事でGoogleフォントを導入することが出来ます。
ただ、このGoogleフォントは凄く便利にフォントを導入できる方法で、通常のWEBフォントの導入方法とは異なりますのでご注意下さい。
以上、WordPressで日本語フォント（Noto Sans JP）を使う簡単な方法でした！
WordPressやWEB技術、集客、ChatGPTなど最新技術に関する情報を毎週お届けする
メールマガジンを発行しています。
不定期でWordPressの脆弱性情報も配信していますので、
WEB担当者やWEBを学んでいる方などにオススメの無料メールマガジンです！
コメント