GoogleWebFonts

 

近年、グーグルによるウェブフォントの充実が高まってきました。あらゆる環境で、読みやすく親しみやすいフォントが、気軽に使えるようになりました。今回は、人気の高い日本語フォントを紹介します。

▶︎GoogleWebFont(日本語バージョン)は、こちら

Contents
  1. Noto Sans Japanese
  2. M PLUS 1p
  3. はんなり明朝

Noto Sans Japanese

Noto Sans Japanese

若干、丸みを帯びた優等生ゴシック体。

太さのバリエーションも豊富で、Black900などはポスターなどにも使えると思います。
▶︎ https://fonts.google.com/noto/specimen/Noto+Sans+JP?subset=japanese

M PLUS 1p

M PLUS 1p

日常的に使うための飽きのこない、それでいてちょっと気になるデザイン。若干手書き風なのが、子供ぽくて親しみやすいフォントですね。

▶︎https://googlefonts.github.io/japanese/#mplus1p

はんなり明朝

やさしくふんわりとした、墨溜まりを意識したデザインフォント。まるで万年筆で書かれたような美しい書体です。ひらがなとカタカナのみに対応。

漢字と英数字、記号などは「IPA明朝体」で補われていますので、タイトルや見出しなど限定した箇所に適しています。

▶︎https://googlefonts.github.io/japanese/#hannari

GoogleWebFontsの使い方

※パソコンで、参照することをお勧めします。

1.　お好みのフォントの太さを選び、その横に「select」をクリックします。

2.　画面をできるだけ広げて、サイドに出ている「Selected family」から、Use on the webのグレー部分のコードをコピーします。

Selected family

3.　Use on the web
To embed a font, copy the code into the <head> of your html
HTMLの<head>内どちらかにペーストします。

4.　「CSS rules to specify families」
コピーし、CSSに、プロパティをペーストします。例えば、body全体を、Noto Sans Japaneseで統一する場合は、以下のようになります。