GoogleFonts+日本語早期アクセスというのをサイトに実装してみたいと思います。
使い方はGoogle Fontsと同じ。
- 使いたいフォントを選ぶ。
- htmlのHead内にlinkを追加しCSSを読み込む。もしくはCSSに@importを追加する。
<link href="https://fonts.googleapis.com/earlyaccess/
****.css" rel="stylesheet" />
@import url(https://fonts.googleapis.com/earlyaccess/****.css);
- CSSのfont-familyにフォント名を追加する。
.wf-roundedmplus1c { font-family: "フォント名"; }
ページ内の右下にあります。
Contents
フォントの種類
フォントの種類は合計で9種類あります。
- M+ 1p
- Rounded M+ 1c
- はんなり明朝
- こころ明朝
- さわらび明朝
- さわらびゴシック
- ニクキュウ
- ニコモジ
- Noto Sans Japanese
実際に使ってみる
上は遊ゴシックの今まで使っていたスタイルです。
ここから色々なGoogle日本語Fontsを試していきたいと思います。
M+ 1p
最初は、M+1pというフォント。
【PC表示】
とても読みやすく、癖が少ないフォントですね。
【Ipod表示】
Ipodn画面の大きさでは、あまり見た目は変わらないかも
【android表示】
携帯の画面では、圧縮されて見えてるのでもう若干違和感が感じられます。