-
- ニュースリリース
- 【無料WEBフォント】GoogleFontsへ、遂に日本語が追加されました!
![](https://tiltilmitil.co.jp/tiltil/wp-content/uploads/2018/10/googlefonts_blog1_4.jpg)
【無料WEBフォント】GoogleFontsへ、遂に日本語が追加されました!
1,561
みなさま、こんにちは!チルチルミチルの竹下です。
本日は、WEB制作の仕事をしている人なら、みんな嬉しいニュースが飛び込んできましたね。
「祝!GoogleFontsに日本語追加!」
いつものように、Googlefontsを閲覧しようとサイトを開いたら、
日本語の表記が出ていた時、思わず鳥肌が立ってしまいました。
これまでは、「Google Fonts + 日本語早期アクセス」を利用しておりましたが、
GoogleFontsでは、お馴染みのNoto Sans Japaneseだけでなく、
明朝体が増えて、より日本語WEBフォントを使用できるケースが増えてきそうです!
本日は、あたらしいGoogleFontsの日本語版のご紹介をいたします。
目次
どんなフォントの種類が追加されたのか?
日本語フォント一覧(2018年10月現在)
![](https://tiltilmitil.co.jp/tiltil/wp-content/uploads/2018/10/font1_2-300x261.jpg)
Noto Sans JP
![](https://tiltilmitil.co.jp/tiltil/wp-content/uploads/2018/10/font5_2-300x261.jpg)
Noto Serif JP
![](https://tiltilmitil.co.jp/tiltil/wp-content/uploads/2018/10/font4_2-300x261.jpg)
Sawarabi Gothic
![](https://tiltilmitil.co.jp/tiltil/wp-content/uploads/2018/10/font2_2-300x261.jpg)
Sawarabi Mincho
![](https://tiltilmitil.co.jp/tiltil/wp-content/uploads/2018/10/font3_2-300x261.jpg)
M PLUS 1p
![](https://tiltilmitil.co.jp/tiltil/wp-content/uploads/2018/10/font6_2-300x261.jpg)
M PLUS Rounded 1c
![](https://tiltilmitil.co.jp/tiltil/wp-content/uploads/2018/10/font8_2-300x261.jpg)
Kosugi
![](https://tiltilmitil.co.jp/tiltil/wp-content/uploads/2018/10/font7_2-300x261.jpg)
Kosugi Maru
全8種類のフォントが実装され、ゴシック体、明朝体、丸ゴシック体が利用できます。
サイドメニューのLanguagesより日本語フォントを絞ることができます。
実装方法
①使用したいフォントの右上をクリックし、フォントを1つ追加する。
※複数選択するとまとまって、コードが生成されるので、注意が必要です。
②画面右下のフォント選択画面をクリックし、展開させます。
展開後、まず青枠のCUSTOMIZEのボタンをクリックします。
③フォントのカスタマイズ画面で、フォントの太さ設定とJapaneseにチェックを入れます。
フォントの太さは、種類を増やしすぎると、ファイルが重くなるので、限られたものだけ選択しましょう。
④EMBEDをクリックし、前の画面に戻ります。生成されたコードは該当箇所に記述していきます。
気になる点を検証してみた!
日本語のフォントで個人的に気になる2つを調べてみました。
1.縦書きはどう表示されるか?
Noto Sans JP
縦書きテストです。
0123456789@㈱©
Noto Serif JP
縦書きテストです。
0123456789@㈱©
Sawarabi Mincho
縦書きテストです。
0123456789@㈱©
Sawarabi Gothic
縦書きテストです。
0123456789@㈱©
M PLUS 1p
縦書きテストです。
0123456789@㈱©
M PLUS Rounded 1c
縦書きテストです。
0123456789@㈱©
Kosugi
縦書きテストです。
0123456789@㈱©
Kosugi Maru
縦書きテストです。
0123456789@㈱©
Sawarabiはちょっと挙動がおかしいようですね…
2.ベースラインのバグはあるのか?
Noto Sans JP 縦中央にそろっている?0123456
Noto Serif JP 縦中央にそろっている?0123456
Sawarabi Mincho 縦中央にそろっている?0123456
Sawarabi Gothic 縦中央にそろっている?0123456
M PLUS 1p 縦中央にそろっている?0123456
M PLUS Rounded 1c 縦中央にそろっている?0123456
Kosugi 縦中央にそろっている?0123456
Kosugi Maru 縦中央にそろっている?0123456
こちらは、ほぼ問題なさそうですね!
最後に
GoogleのWEBフォントは、Googleの高性能なサーバーとまた最小ファイルで送信を行う圧縮技術で日本語のWEBフォントでもスピーディに表示させることができます。
ぜひ、実際の案件でお試しください!
Contact
-
お電話でのお問い合わせ
092-409-8282
9:00~18:00(日祝休)
- メールでのお問い合わせ