零弐壱蜂

Googleが配信している日本語ウェブフォント一覧

7 min read
hiroweb developer

はじめに（結論）

色々と調べて書いていたが、途中でGoogle Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Accessを見つけて、一覧があった。

M+ 1p

サンプル

すると、夜空に最初の流れ星が現れた。 すると、夜空に最初の流れ星が現れた。 すると、夜空に最初の流れ星が現れた。 すると、夜空に最初の流れ星が現れた。 すると、夜空に最初の流れ星が現れた。 すると、夜空に最初の流れ星が現れた。 すると、夜空に最初の流れ星が現れた。 すると、夜空に最初の流れ星が現れた。 すると、夜空に最初の流れ星が現れた。 
<link
  href="https://fonts.googleapis.com/earlyaccess/mplus1p.css"
  rel="stylesheet"
/>

.wf-mplus1p {
  font-family: "Mplus 1p";
}

作者サイト

M+ FONTS

Rounded M+ 1c

サンプル

すると、夜空に最初の流れ星が現れた。 すると、夜空に最初の流れ星が現れた。 すると、夜空に最初の流れ星が現れた。 すると、夜空に最初の流れ星が現れた。 すると、夜空に最初の流れ星が現れた。 すると、夜空に最初の流れ星が現れた。 すると、夜空に最初の流れ星が現れた。 すると、夜空に最初の流れ星が現れた。 すると、夜空に最初の流れ星が現れた。 
<link
  href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css"
  rel="stylesheet"
/>

.wf-roundedmplus1c {
  font-family: "Rounded Mplus 1c";
}

作者サイト

自家製フォント工房

はんなり明朝

サンプル

あかるく、 やさしく、 ふんわり。 
<link
  href="https://fonts.googleapis.com/earlyaccess/hannari.css"
  rel="stylesheet"
/>

.wf-hannari {
  font-family: "Hannari";
}

作者サイト

フォント無料ダウンロード｜ Typing Art

こころ明朝

サンプル

わたしのふたつのじんかくにはきょうつうのきおくがある。 
<link
  href="https://fonts.googleapis.com/earlyaccess/kokoro.css"
  rel="stylesheet"
/>

.wf-kokoro {
  font-family: "Kokoro";
}

作者サイト

フォント無料ダウンロード｜ Typing Art

さわらび明朝

サンプル

どうやらアトモスフェアの高い位置まで到達したようだった。空は真っ暗で、星の瞬きもなくなっていた。丘の上では彼方に広がる水平線が同じ高さに見えるのと同じ錯覚によって、眼下に真っ暗な雲が広がり、車は巨大な暗い空間の真ん中に浮いているように見えた。その空間の上半分は銀色にきらめいていた。 
<link
  href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css"
  rel="stylesheet"
/>

.wf-sawarabimincho {
  font-family: "Sawarabi Mincho";
}

作者サイト

fontopo | 日本語フォント無料ダウンロード

さわらびゴシック

サンプル

依然として速度を増しながら進むにつれて、夜と日中の切り替わりが曖昧になり、一続きの灰色になった。空は深い青色で夕暮れ時のような明るい光で照らされている。急に現れる太陽はきらめく円弧の形をした光の筋となった。月はおぼろげに揺らぐ帯となり、星は見えなかった。ただ、時折青い空に明るく瞬く円が見えた。 
<link
  href="https://fonts.googleapis.com/earlyaccess/sawarabigothic.css"
  rel="stylesheet"
/>

.wf-sawarabigothic {
  font-family: "Sawarabi Gothic";
}

作者サイト

丸文字フォント（ニコ文字）配布所 - 無料ダウンロード可

ニクキュウ

サンプル

トントン 　 ピョンピョン モタ　モタ スタ
```html ```
.wf-nikukyu {
  font-family: "Nikukyu";
}

作者サイト

mshio’s blog

ニコモジ

サンプル

いらっしゃいませ 
<link
  href="https://fonts.googleapis.com/earlyaccess/nicomoji.css"
  rel="stylesheet"
/>

.wf-nicomoji {
  font-family: "Nico Moji";
}

作者サイト

mshio’s blog

Noto Sans Japanese

サンプル

本当にすばらしい旅だった。多くの愛すべき人々と出会ったが、彼らと再び会うことはないだろう。一生は短く、誰もがリダウトの安全と繁栄のために尽力しなければならない。それでも、訪れたすべての都市でたくさん旅をした。多くの人々がいたが、時間が足りなかった。 
<link
  href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css"
  rel="stylesheet"
/>

.wf-notosansjapanese {
  font-family: "Noto Sans Japanese";
}

作者サイト

Google Noto Fonts

まとめ

この記事には、fonts.googleapis.comから 9 つの CSS を読み込んでいる。確認すると、各フォントのウェイトを合計するとフォントファイルが 27 個ほど読み込まれていた。Google の配信の仕方やブラウザの進歩のおかげで（適当）、思ったほど表示に負荷はかかっていないように感じた。もちろん環境によっては見られたものではないかもしれないが、一般的な家庭の回線で難なく読み込みが出来ている事が確認できたのは収穫だ。