フォント一覧

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

ベースフォント

Source Han Sans (源ノ角ゴシック)

フリーフォントで恐らく最も重宝されているゴシック体フリーフォント。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/[email protected]/dist/SourceHanSans/SourceHanSanscss

ウェイト

ExtraLight100
Light200
Normal300
Regular400
Medium500
Bold700
Heavy800

Source Han Sans HW

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/[email protected]/dist/SourceHanSerif/SourceHanSerifcss

ウェイト

ExtraLight100
Light200
Regular400
Medium500
SemiBold600
Bold700
Heavy800

M+ Fonts

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

このセットでは、欧文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-Japa[email protected]/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/[email protected]/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/[email protected]/dist/corporateLogo/corporateLogocss

ウェイト

medium500
bold700

ラノベPOP

ポップ体(ウェイトは800を指定)

font-familyLiNovePOP-w, SourceHanSans-w
URLhttp://www.fontna.com/blog/1706/
LiscenseM+ Fonts License
CSShttps://cdn.jsdelivr.net/gh/tamaina/[email protected]/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/[email protected]/dist/KeiFont/KeiFont.css

ぼくたちのゴシック2

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

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/[email protected]/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/[email protected]/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/[email protected]/dist/GenEiAntique/GenEiAntiquecss
https://cdn.jsdelivr.net/gh/tamaina/[email protected]/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/[email protected]/dist/GenEiLateGo/GenEiLateGocss
https://cdn.jsdelivr.net/gh/tamaina/[email protected]/dist/GenEiLateGo-*/GenEiLateGo-*.css
*はP,Nに置き換えてください。

源瑛Nuゴシック

仮名を大振りにするなどした、漫画向けの太ゴシック(ウェイトは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/[email protected]/dist/GenEiNuGothic/GenEiNuGothic.css

GenEi Univer Sans

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

font-familyGenEiUniverSans-w, SourceHanSans-w
URLhttps://okoneya.jp/font/download.html
LiscenseSIL Open Font License 1.1
CSShttps://cdn.jsdelivr.net/gh/tamaina/[email protected]/dist/GenEiUniverSans/GenEiUniverSanscss

ウェイト

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/[email protected]/dist/GenEiRomanNotes/GenEiRomanNotes.css

Nasu

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

font-familyNasu-w
URLhttp://itouhiro.hatenablog.com/entry/20140917/font
LiscenseSIL Open Font License 1.1
CSShttps://cdn.jsdelivr.net/gh/tamaina/[email protected]/dist/Nasu/Nasu.css

ウェイト

Regular400
Bold700

NasuM

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

font-familyNasuM-w
URLhttp://itouhiro.hatenablog.com/entry/20140917/font
LiscenseSIL Open Font License 1.1
CSShttps://cdn.jsdelivr.net/gh/tamaina/[email protected]/dist/NasuM/NasuM.css

ウェイト

Regular400
Bold700