WordPress

WordPressで日本語Googleフォント(Noto Sans JP)を使う簡単な方法

notosansjp WordPress

こんにちは。

埼玉のフリーランスエンジニアとしです!

この記事では、今使っているテーマのフォントがいまいち読みにくいなぁと思っている人の為に、google fontで無料で提供されている”Noto Sans JP”を簡単に導入する方法をご説明したいと思います。

WEBフォントを導入するメリット

Webフォントを導入するメリットは、環境に依存せず同じフォントで表示することができる事です。

環境に依存せずにというのはどういう事かというと、例えばWindowsとMacの違いです。

よくMacのフォントが綺麗だという話を聞いたり既に思っている方も居ると思いますが、それはヒラギノというフォントを指していると思っていて、そのヒラギノのフォントはMacには標準で入っていますが、Windowsには標準では入っていないのです。

CSSでフォントを指定する際には、優先順位をつけてフォントを指定するのですが、ヒラギノを最優先にして、もしヒラギノがなければMSのフォントという風に代わりのフォントを使うようになります。

しかし、もしWebフォントを導入しているとどうなるかというと、フォントをサーバーから一度ダウンロードした状態でフォントを指定するため、どの機種でも同じフォントを使って表示する事が出来るのです。

これが、一番のメリットですね。

 

 

Google fontのページでフォントの取得

Google fontのNoto Sans JPのページに進みます。

Noto Sans Japanese - Google Fonts
Noto is a global font collection for writing in all modern and ancient languages. Noto Sans JP is an unmodulated (“sans ...

notosansjp

このページが表示されたら、右上にある「SELECT THIS FONT」をクリックします。

 

そうすると、右下の方に「Family Selected」というウィンドウが出てくるので、CUSTOMIZEをクリックします。

notosansjp

CUSTOMIZEの画面になったら、「bold」と「Japanese」にチェックを入れます。

 

notosansjp

CUSTOMIZEの設定がおわったら、「EMBED」のタブに切り替えます。

そうするとはじめは、「STANDARD」というタブが選択されているので@IMPORTをクリックします。

画像に①と②と赤枠で囲んでいますが、これらをWordPressのCSSにこれからコピペしていきます。

 

Noto Sans JPをWordPressに導入

WordPressの管理画面に入ったら、「外観」→「カスタマイズ」をクリックします。

notosansjp

 

そうすると、左メニューに「追加CSS」という項目が出てくるので、クリックします。

notosansjp

 

notosansjp

「追加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;
}

②については、アスタリスク(*)を指定して、かっこ({})で囲む必要があります。

 

これで「公開」をクリックすれば完了です。

このカスタマイズ中にフォントがリアルタイムで変更されているのが分かるはずです。

notosansjp

以上で、Noto Sans JPの導入の完了です。

 

導入する際の注意

Google fontを導入する際に注意しなければいけないのが、ロード時間が掛かるという点です。

ページを表示する際にGoogleフォントにアクセスするために掛かる時間で、若干読み込みが遅くなります。

それでも、WEBフォントなのでサーバーにフォントを用意してローディングするよりはローディングは早いのでそこまで気にすることはありませんが、読み込み時間が遅くなるという事は留意して下さい。

 

まとめ

Noto Sans JPは日本語フォントでもとても見やすいフォントですのでおすすめです。

また、このGoogleフォントの導入方法が分かると、お気に入りのフォントを見つけて同じ様に設定する事でGoogleフォントを導入することが出来ます。

ただ、このGoogleフォントは凄く便利にフォントを導入できる方法で、通常のWEBフォントの導入方法とは異なりますのでご注意下さい。

以上、WordPressで日本語フォント(Noto Sans JP)を使う簡単な方法でした!

 

WordPressマンツーマンレクチャーサービス
WordPressで書きたいブログが決まり、さてブログを立ち上げようと意気込んだのは良いけど、WordPressは意外と立ち上げから全ての設定を終わらせるまでのプロセスが初心者には難しく感じ、中には挫折してしまった方も少なくないと思います。

 

WordPressやWEB技術、集客、ChatGPTなど最新技術に関する情報を毎週お届けする
メールマガジンを発行しています。
不定期でWordPressの脆弱性情報も配信していますので、
WEB担当者やWEBを学んでいる方などにオススメの無料メールマガジンです!

メールマガジン案内ページに移動する

こちらの記事もおすすめです

この記事を書いた人
Toshi Seito

TEDASK代表
WordPressに関する相談実績のべ300件以上、タイムチケットでのWordPressの立ち上げお手伝いのチケット販実績240件以上!WordPressのカスタマイズから、WEBサービス制作、ホームページ制作のご相談はお任せ下さい。

Toshi Seitoをフォローする

コメント

タイトルとURLをコピーしました