日本語 WEB Fontのウェイトに関して

投稿日: カテゴリー: Wordpress

GoogleFontってホント便利。

日本語も順次対応してくみたい。
GoogleFont 日本語で早期テスト公開されているフォントには数段階の太さをもったゴシックと丸ゴシックがある。

CSSで記述する際にの「どれがどれ?」をメモ。

M+1p(ゴシック系)

CSSの場合…
@import url(“https://fonts.googleapis.com/earlyaccess/mplus1p.css”);
.wf-mplus1p { font-family: “Mplus 1p”; }

Rounded M+1c(丸ゴシック系)

CSSの場合…
@import url(“https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css”);
.wf-roundedmplus1c { font-family: “Rounded Mplus 1c”; }

M+1pとRounded M+1cに関しては下記のウェイトまで対応している。
すばらしい!

100=Thin (Hairline)
300=Light
400=Normal
500=Medium
700=Bold
800=Extra Bold (Ultra Bold)
900=Black (Heavy)

 

明朝系ではこちらの2種類が良い感じ。
「はんなり明朝」は以前からフリーフォントとして公開されており、そこでもWEBFontとして利用方法を紹介していたが、GoogleFontになってとっても便利!

はんなり明朝

CSSの場合…
@import url(“https://fonts.googleapis.com/earlyaccess/hannari.css”);
.wf-hannari { font-family: “Hannari”; }

さわらび明朝

CSSの場合…
@import url(“https://fonts.googleapis.com/earlyaccess/sawarabimincho.css”);
.wf-sawarabimincho { font-family: “Sawarabi Mincho”; }