Web Marketing Blog

株式会社プレスマンのWebマーケティング部によるスタッフブログです。

コーディング デザイン

Google Fonts + Japanese Early Accessにて日本語フリーフォント9種公開中

2017年1月11日

Google Fonts + Japanese Early Accessが拡張され、日本語のフリーフォントがWebフォントとして9種類使えるようになっています!
Google Fontsと同じく全て無料で使えて読み込みも高速なため、ストレスを感じません。
今回は、個人的におすすめのフォントとその使い方をご紹介します。

おすすめのフォント紹介

Google Fonts + Japanese Early Accessには幅広いテイストの日本語フォントが無料で用意されていますが、その中でも個人的に特にお気に入りのフォントをご紹介します。

M+ 1p

M+1P

「日常的に使うための飽きのこない、それでいてちょっと気になるデザイン。」
森下浩司

M +P1は「M+1(エムプラスワン)」シリーズの1つで、柔らかい印象のあるゴシック体のフォントです。

元から使いやすいフリーフォントとして有名でしたが、Google Fontsとして公開されたことで、より手軽にWebフォントとして利用できるようになりました。
ウェイト(太さ)も7種類と豊富に用意されているので、見出しだけでなく本文にも使える、オールマイティーなフォントです。

2018.08.21追記:
Google Fontsに「M +P1」が追加されました!
https://fonts.google.com/?query=m%2B&selection.family=M+PLUS+1p
Google Fontsに「M +P1」が新しい日本語フォントとして正式に追加されました。
全てのウェイトを利用することができ、同じシリーズで丸みを帯びた「Rounded M+」も同時に追加されています。
Japanese Early Accessはあくまで試験的な提供サービスのため、今後はGoogle Fontsで使うのがオススメです。
※当サイトのHTMLソースは、Google Fontsのものに差し替え済みです。

見出しと本文の描画サンプル

M + P1 とは?

M +P1は、森下浩司さんデザインのフリーフォント「M+1(エムプラスワン)」シリーズの1つで、柔らかい印象のあるゴシック体のフォントです。

使い方

以下のコードをそれぞれ追加してください。
※2018.08.21追記:Google Fontsで日本語フォントとして正式に追加されたため、ソースを差し替えました。

HTML:

CSS:

はんなり明朝

はんなり明朝

「明朝体は墨溜まりを意識してデザインしています。」
中井良尚

はんなり明朝は、以前、お客様のサイトでわざわざサブセット化してWebフォントにしていたくらいお気に入りのフォントです。

デモでは縦書きですが、横書きでも可愛くて、サイトのメインのキャッチコピーなどによく使わせていただいていました。
築地体を参考に製作されたそうで、なんとも言えないレトロな味わいがあります。

見出しと本文の描画サンプル

はんなり明朝とは?

はんなり明朝は築地体を参考に製作されたフォントで、なんとも言えないレトロな味わいがあります。

使い方

HTML:

CSS:

ニコモジ

ニコモジ

「すこしでもデザインのてだすけになれればさいわいです。」
Ku-ku (Do-Font)

ニコモジはその名の通り、ニコニコ動画(GINZA)のフォントを元に製作されています。

ユニークな形のフリーフォントですが、特にカーニングなどを調整しなくてもバランスの良い太文字のフォントなので、見出しやプレゼンのスライドなどによく利用させていただきました。

作者のKu-kuさんのサイトでは、漢字が追加されたニコモジ・プラスが公開されていますが、Google Fonts + Japanese Early Accessにあるフォントファイルはカタカナと平仮名のみのバージョンとなります。

見出しの描画サンプル

ニコモジとは?

使い方

HTML:

CSS:

使い方のコツ

基本的には紹介されているHTMLとCSSのみで簡単に利用することができますが、公式サイトに紹介されているCSSそのままですとフォントに対応していない文字との差異が大きくなるため、明朝体の場合は「serif」、ゴシック体の場合は「sans-serif」をfont-familyに追加した方が良いかもしれません。

例)はんなり明朝の場合:

最後に

今回、無料のWebフォントとしては珍しく、個性的なフォントから使いやすいウェイトの揃ったゴシック&明朝まで、幅広いWebフォントで用意されていて嬉しいです。おすすめです!

Webマーケティング部のスタッフです。主にデザインとコーディングを担当しています。見やすさ&わかりやすさ、それにちょっぴり遊び心を加えたWebデザインを目指しています。

-コーディング, デザイン
-, , , ,

Copyright© Web Marketing Blog , 2019 All Rights Reserved.