TEDASKは埼玉県川口市のフリーランスWEBエンジニアが運営するホームページです。WordPressによるウェブサイト制作からWEB制作に関するお悩み解決をお手伝いしています!

TEDASK(テダスク)

HTML+CSS WordPress 初心者向け 運用者向け

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

投稿日:

こんにちは。

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

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




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

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

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

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

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

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

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

 

 

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

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

https://fonts.google.com/specimen/Noto+Sans+JP

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は意外と立ち上げから全ての設定を終わらせるまでのプロセスが初心者には難しく感じ、中に ...

続きを見る

 

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

phpmyadmin

WordPress エンジニア向け ツール 運用者向け

ユーザー名もメールアドレスも忘れてしまったWordPressにログインする方法

皆さんはWordPressを使っていて、入れなくなるということはほとんど無いと思いますが、今までご依頼をいただいたお客様の中にはWordPressの管理はスタッフに任せていてユーザー名もパスワードも分 ...

直帰率の改善方法

WEB集客 WordPress 運用者向け

【Googleアナリティクス】ウェブサイトの直帰率を改善する3つの方法

こんにちは! 埼玉県でフリーランスエンジニアをやっていますとしです! この記事はWordPressについて専門で書いているサイトに移動しましたのでそちらをご覧下さい。 【Googleアナリティクス】ウ ...

notosansjp

HTML+CSS WordPress 初心者向け 運用者向け

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

こんにちは。 埼玉のフリーランスエンジニアとしです! この記事では、今使っているテーマのフォントがいまいち読みにくいなぁと思っている人の為に、google fontで無料で提供されている”Noto S ...

WordPressで作ったサイトのお問い合わせから迷惑メール(スパム)が来ないようにする簡単な方法

WordPress プラグイン 初心者向け 運用者向け

WordPressで作ったサイトのお問い合わせから迷惑メール(スパム)が来ないようにする簡単な方法

こんにちは。 埼玉で活動しているフリーランスエンジニアのとしです!   今日はWordPressで作ったサイトのお問い合わせページから頻繁に迷惑メール(スパムメール)がくるので対策したいのだ ...

WordPress プラグイン 初心者向け 運用者向け

WordPressにソーシャルボタンを設置する方法とおすすめプラグイン

こんにちは。テダスクのとしです。 今回は、WordPressを立ち上げたけど、「いいね!」や「シェアする」の様なソーシャルボタンを設置したい人向けの記事になります。 この記事には ソーシャルボタンのお ...

この記事が気に入ったら
いいね ! しよう

-HTML+CSS, WordPress, 初心者向け, 運用者向け
-, ,