フォント一覧

The Japanese Web Fonts v7.2.0現在のフォント一覧。

フリーフォントで恐らく最も重宝されているゴシック体フリーフォント。AdobeとGoogleが共同で開発し、Adobeからは「源ノ角ゴシック（日本語名）・Source Han Sans（英語名）」、Googleからは「Noto Sans JP」という名前でリリースされている。

font-familySourceHanSans-w
利用可能なfont-feature-settings指定palt
URLhttps://github.com/adobe-fonts/source-han-sans/
LiscenseSIL Open Font License 1.1
CSShttps://cdn.jsdelivr.net/gh/tamaina/The-Japanese-Web-Fonts@v7.2.0/dist/SourceHanSans/SourceHanSans.css

ウェイト

ExtraLight100
Light200
Normal300
Regular400
Medium500
Bold700
Heavy800

Source Han Sansと同じく、AdobeとGoogleが共同で開発し、Adobeからは「源ノ明朝（日本語名）・Source Han Serif（英語名）」、Googleからは「Noto Serif JP」という名前でリリースされている。

font-familySourceHanSerif-w
利用可能なfont-feature-settings指定palt
URLhttps://github.com/adobe-fonts/source-han-serif/
LiscenseSIL Open Font License 1.1
CSShttps://cdn.jsdelivr.net/gh/tamaina/The-Japanese-Web-Fonts@v7.2.0/dist/SourceHanSerif/SourceHanSerif.css

ウェイト

ExtraLight100
Light200
Regular400
Medium500
SemiBold600
Bold700
Heavy800

有名な日本語角ゴシックフリーフォント。

このセットでは、欧文4書体と日本語2書体、共通する記号をそれぞれ別の書体とすることで効率化を図っている。 ここの指定では、mplus-c-w, mplus-1-w, mplus-S-wを指定して「M+ 1C」で表示している。
それぞれの書体についてはこちらを参照。

font-familymplus-c-w
mplus-p-w
mplus-m-w
mplus-mn-w

mplus-1-w(日本語1
mplus-2-w(日本語2)

mplus-S-w(記号)
URLhttps://mplus-fonts.osdn.jp/
LiscenseM+ Fonts License
CSShttps://cdn.jsdelivr.net/gh/tamaina/The-Japanese-Web-Fonts@v7.2.0/dist/mplus-*/mplus-*.css
*をc,p,mmn,1,2,Sに置き換えてください。

ウェイト

MおよびMNにはheavyとblackがない。

thin100
light200
regular400
medium500
bold700
heavy800
black900

アドオンフォントはベースフォントと違う部分だけ収録しているため、ベースフォントを別途追加で指定する必要があります。（NasuとNasuMは例外）

和風な角ゴシックフォント。

font-familyirohakakuC-w, SourceHanSans-w
URLhttp://modi.jpn.org/font_irohakakuc.php
LiscenseSIL Open Font License 1.1
CSShttps://cdn.jsdelivr.net/gh/tamaina/The-Japanese-Web-Fonts@v7.2.0/dist/irohakakuC/irohakakuC.css

ウェイト

ExtraLight100
Light200
Regular400
Medium500
Bold700

最近街中でよく見かけがちな（？）ロゴフォント。

font-familycorporateLogo-w, SourceHanSans-w
URLhttp://logotype.jp/corporate-logo-font-dl.html
LiscenseSIL Open Font License 1.1
CSShttps://cdn.jsdelivr.net/gh/tamaina/The-Japanese-Web-Fonts@v7.2.0/dist/corporateLogo/corporateLogo.css

ウェイト

medium500
bold700

ポップ体（ウェイトは800を指定）

font-familyLiNovePOP-w, SourceHanSans-w
URLhttp://www.fontna.com/blog/1706/
LiscenseM+ Fonts License
CSShttps://cdn.jsdelivr.net/gh/tamaina/The-Japanese-Web-Fonts@v7.2.0/dist/LiNovePOP/LiNovePOP.css

ポップ体（ウェイトは800を指定）

font-familyKeiFont-w, SourceHanSans-w
URLhttp://font.sumomo.ne.jp/font_1.html
LiscenseApache License 2.0
CSShttps://cdn.jsdelivr.net/gh/tamaina/The-Japanese-Web-Fonts@v7.2.0/dist/KeiFont/KeiFont.css

子どもっぽいゴシック仮名

font-familyBoku2Gothic-w, SourceHanSans-w
URLhttps://fontopo.com/?p=94, https://fontopo.com/?p=98
LiscenseApache License 2.0
CSShttps://cdn.jsdelivr.net/gh/tamaina/The-Japanese-Web-Fonts@v7.2.0/dist/Boku2Gothic/Boku2Gothic.css

ウェイト

Regular400
Bold700

子どもっぽいゴシック仮名

font-familyBokuGothic-w, SourceHanSans-w
URLhttps://fontopo.com/?p=164
LiscenseIPAフォントライセンスv1.0
CSShttps://cdn.jsdelivr.net/gh/tamaina/The-Japanese-Web-Fonts@v7.2.0/dist/BokuGothic/BokuGothic.css

漫画の本文で使われるアンチゴチ体（ウェイトは500を指定）

font-familyGenEiAntique-w(共通)
GenEiAntique-N-w(かな)
GenEiAntique-P-w(かなプロポーショナル)
URLhttp://okoneya.jp/font/genei-antique.html
LiscenseSIL Open Font License 1.1
CSShttps://cdn.jsdelivr.net/gh/tamaina/The-Japanese-Web-Fonts@v7.2.0/dist/GenEiAntique/GenEiAntique.css
https://cdn.jsdelivr.net/gh/tamaina/The-Japanese-Web-Fonts@v7.2.0/dist/GenEiAntique-*/GenEiAntique-*.css
*はP,Nに置き換えてください。
font-familyGenEiLateGo-w(共通)
GenEiLateGo-N-w(かな)
GenEiLateGo-P-w(かなプロポーショナル)
URLhttp://okoneya.jp/font/genei-latin.html
LiscenseSIL Open Font License 1.1
CSShttps://cdn.jsdelivr.net/gh/tamaina/The-Japanese-Web-Fonts@v7.2.0/dist/GenEiLateGo/GenEiLateGo.css
https://cdn.jsdelivr.net/gh/tamaina/The-Japanese-Web-Fonts@v7.2.0/dist/GenEiLateGo-*/GenEiLateGo-*.css
*はP,Nに置き換えてください。

仮名を大振りにするなどした、漫画向けの太ゴシック（ウェイトは800を指定）

font-familyGenEiNuGothic-w, SourceHanSans-w
URLhttps://okoneya.jp/font/genei-nu-gothic.html
LiscenseSIL Open Font License 1.1
CSShttps://cdn.jsdelivr.net/gh/tamaina/The-Japanese-Web-Fonts@v7.2.0/dist/GenEiNuGothic/GenEiNuGothic.css

日本語フォントと混植しても違和感がないようにしたHindベースの英数ゴシックフォント

font-familyGenEiUniverSans-w, SourceHanSans-w
URLhttps://okoneya.jp/font/download.html
LiscenseSIL Open Font License 1.1
CSShttps://cdn.jsdelivr.net/gh/tamaina/The-Japanese-Web-Fonts@v7.2.0/dist/GenEiUniverSans/GenEiUniverSans.css

ウェイト

L200
SL300
R400
SB600
B700
H800
Bk900

「えれがんと」と一緒に使える欧文フォント（font-faceで指定されているウェイトは900だが、ここでは700を指定）

font-familyGenEiRomanNotes-w
URLhttps://okoneya.jp/font/genei-romanotes.html
LiscenseSIL Open Font License 1.1
CSShttps://cdn.jsdelivr.net/gh/tamaina/The-Japanese-Web-Fonts@v7.2.0/dist/GenEiRomanNotes/GenEiRomanNotes.css

ディスプレイ向けのフォント

font-familyNasu-w
URLhttp://itouhiro.hatenablog.com/entry/20140917/font
LiscenseSIL Open Font License 1.1
CSShttps://cdn.jsdelivr.net/gh/tamaina/The-Japanese-Web-Fonts@v7.2.0/dist/Nasu/Nasu.css

ウェイト

Regular400
Bold700

ディスプレイ向けの等幅フォント

font-familyNasuM-w
URLhttp://itouhiro.hatenablog.com/entry/20140917/font
LiscenseSIL Open Font License 1.1
CSShttps://cdn.jsdelivr.net/gh/tamaina/The-Japanese-Web-Fonts@v7.2.0/dist/NasuM/NasuM.css

ウェイト

Regular400
Bold700