Googleが日本語Webフォントを無料公開! 導入してみた感想

Googleウェブフォント 日本語 アイキャッチ

どうも、年の瀬に大掃除が進んでおらず困っています。ノブトヨム(@nobutoyomu)です。

先日、当ブログの掃除も兼ねて、Googleが無料で公開している日本語Webフォントを導入してみました。

ということで今回はGoogleの日本語Webフォントの紹介とWordPress環境にてWebフォントを導入する手順を紹介していきます。

https://googlefonts.github.io/japanese/

スポンサーリンク

Google日本語Webフォントの種類と実用性

Google日本語ウェブフォント 試験的 9種類 ゴシック 明朝

現在試験的に公開されているWebフォントは9種類。

書体によっては文字数も少なく、使用が限られるようなフォントもあります。

どのフォントも魅力的ですが個人的には「さわらび明朝」に期待していますね。

ただ実際に導入してみたところ、まだ本文に使うには字数が足りていない印象でした。

「M+1p」や「はんなり明朝」などのフォントは、既に文字数も充実しているので活用できると思います。

今回の試験提供はゴシック、明朝、デザイナーズ等と多くのウェブサイトに対応できるラインナップなのが特徴的。

登録などの必要も無く、簡単にWebフォントを実装出来るので自分のブログで文字数は大丈夫か一度試してみるのも良いかと思います。

ウェブフォントのメリットやデメリットについては以前記事にしたので、そちらをどうぞ。

「TypeSquare」を利用してブログをWEBフォントにしてみた

Google日本語WebフォントをWordPressに導入

Google日本語ウェブフォント さわらび明朝

公開されている9種類のフォントのどれもに惹かれますが、その中から当ブログでは「さわらびゴシック」を導入してみました。

WordPressへの導入手順といっても、各フォントの説明欄にある「HTML」のコードを貼り付けてCSSで変更したい部分のfont-familyを指定するだけ。

「HTML」のコードは「外観」→「テーマの編集」に移動し「header.php」のコードにある </head> の真上に貼り付けます。

次にウェブフォントを適用させたい箇所( body,h1,h2 等)の font-family に適用させたいフォントのコードを記述します。

例:font-family: “Sawarabi Gothic”, “Lato”, sans-serif;

導入するのは以上の2ステップで終了。

コードも間違っていないのに変わらない方はキャッシュを削除してみることを忘れずに。

今回、当ブログを「さわらびゴシック」に変更して思ったのは、かなり可読性が良いですね。

ただし、まだ試験的ということもあるので当ブログは既に元のWebフォントへと戻しています。

皆さんも無料で提供されているGoogle日本語Webフォントを是非試してみては如何でしょうか?

それでは、お疲れ様でした。

[amazonjs asin=”4844331671″ locale=”JP” title=”サイトデザインに差をつける Webフォントコレクション (ijデジタルBOOK)”]