Google Fonts + 日本語を使用して、Webサイトやブログがどのように表示されるか試すことができるツール -Fonty
Post on:2018年11月5日
2018年9月にGoogle Fontsは日本語が正式にサポートされ、既に利用されている人、検討されている人も多いと思います。当ブログでも早期アクセスから使用しています。
日本語の正式サポートに伴い、Google Fontsを使用したさまざまなツールも日本語が利用できるようになりました。
自分のWebサイトやブログに、Google Fonts + 日本語を使用するとどのように表示されるか試すことができるオンラインツールを紹介します。

Google Fonts + 日本語でどのように表示されるかテスト
Google Fonts + 日本語を使用するとどのように表示されるか試すことができるオンラインツールはこちら、Fontyです。
登録など面倒なことは一切不要で、無料で利用できます。

Webフォントを簡単に試すことができるツールです。
まずは、左端のピンクのタブから「Titles」「Main」を選択し、左パネルからフォントを指定します。フォントは一覧でも表示されますが、検索機能を使用する方が簡単です。
ちなみに、選択したフォントは上部の「Download」からダウンロードできます。

使用するフォントの指定
フォントを指定したら、試したいページのURLを上部に入力します。

試したいページのURLを入力
これで、完了です。
あとは、左パネルからフォントを変更するだけで、いろいろなGoogle Fonts + 日本語を試すことができます。

M PLUS 1pでコリスを表示

M PLUS Rounded 1cでコリスを表示

さわらびゴシックでコリスを表示

さわらび明朝でコリスを表示

Noto Sans JPでコリスを表示
Google Fonts + 日本語の使い方
Google Fonts + 日本語は、下記から利用できます。

現在利用できる日本語フォントは、9種類。
2018年11月現在、5種類が正式版、4種類が早期アクセスになっています。

使用できるフォントの一覧
Google Fonts + 日本語をWebサイトやブログで利用したい時は、下記フォントのコードをコピペするだけでOKです。

例えば、M PLUS 1pだと下記のようになります。
1 2 3 |
<head> <link href="https://fonts.googleapis.com/css?family=M+PLUS+1p" rel="stylesheet"> </head> |
1 |
.wf-mplus1p { font-family: "M PLUS 1p"; } |
sponsors