web utility

font family: Sub Set

IBMPlexSansJP

IBMPlexSansJP-100
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

IBMPlexSansJP-200
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

IBMPlexSansJP-300
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

IBMPlexSansJP-400
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

IBMPlexSansJP-500
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

IBMPlexSansJP-600
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

IBMPlexSansJP-700
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

前提

/assets/font/IBMPlexSansJP-■■■.woff2
〜をコピー

html

css

.IBMPlexSansJP { font-family: "IBMPlexSansJP"; }

NotoSansJP

NotoSansJP-100
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

NotoSansJP-200
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

NotoSansJP-300
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

NotoSansJP-400
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

NotoSansJP-500
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

NotoSansJP-600
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

NotoSansJP-700
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

NotoSansJP-800
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

NotoSansJP-900
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

前提

/assets/font/NotoSansJP-■■■.woff2　〜をコピー

html

css

.NotoSansJP {
　　font-family: "NotoSansJP";
}

NotoSerifJP

NotoSerifJP-200
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

NotoSerifJP-300
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

NotoSerifJP-400
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

NotoSerifJP-500
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

NotoSerifJP-600
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

NotoSerifJP-700
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

NotoSerifJP-900
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

前提

/assets/font/NotoSerifJP-■■■.woff2　〜をコピー

html

css

.NotoSerifJP {
　　font-family: "NotoSerifJP";
}

SawarabiGothic

SawarabiGothic-400
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

前提

/assets/font/SawarabiGothic-■■■.woff2　〜をコピー

html

css

.SawarabiGothic {
　　font-family: "SawarabiGothic";
}

ZenKakuGothicNew

ZenKakuGothicNew-300
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

ZenKakuGothicNew-400
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

ZenKakuGothicNew-500
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

ZenKakuGothicNew-700
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

ZenKakuGothicNew-900
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

前提

/assets/font/ZenKakuGothicNew-■■■.woff2　〜をコピー

html

css

.ZenKakuGothicNew {
　　font-family: "ZenKakuGothicNew";
}

ShipporiMinchoB1

ShipporiMinchoB1-400
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

ShipporiMinchoB1-500
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

ShipporiMinchoB1-600
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

ShipporiMinchoB1-700
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

ShipporiMinchoB1-800
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

前提

/assets/font/ShipporiMinchoB1-■■■.woff2　〜をコピー

html

css

.ShipporiMinchoB1 {
　　font-family: "ShipporiMinchoB1";
}

ZenMaruGothic

ZenMaruGothic-300
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

ZenMaruGothic-400
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

ZenMaruGothic-500
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

ZenMaruGothic-700
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

ZenMaruGothic-900
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

前提

/assets/font/ZenMaruGothic-■■■.woff2　〜をコピー

html

css

.ZenMaruGothic {
　　font-family: "ZenMaruGothic";
}

ZenOldMincho

ZenOldMincho-400
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

ZenOldMincho-500
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

ZenOldMincho-600
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

ZenOldMincho-700
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

ZenOldMincho-900
毛虫が終末と思う、その形態。救世主は蝶と名付けた。

前提

/assets/font/ZenOldMincho-■■■.woff2　〜をコピー

html

css

.ZenOldMincho { font-family: "ZenOldMincho"; }

font-size

font-size: 7.2rem=72px

毛虫が終末と

font-size: 6.0rem=60px

毛虫が終末と

font-size: 4.8rem=48px

毛虫が終末と思う、

font-size: 3.6rem=36px

毛虫が終末と思う、その形態。

font-size: 2.4rem=24px

毛虫が終末と思う、その形態。

font-size: 2.1rem=21px

毛虫が終末と思う、その形態。

font-size: 1.8rem=18px

毛虫が終末と思う、その形態。救世主は蝶と名付けた。

font-size: 1.5rem=15px

毛虫が終末と思う、その形態。救世主は蝶と名付けた。

font-size: 1.4rem=14px

毛虫が終末と思う、その形態。救世主は蝶と名付けた。

font-size: 1.3rem=13px

毛虫が終末と思う、その形態。救世主は蝶と名付けた。

font-size: 1.2rem=12px

毛虫が終末と思う、その形態。救世主は蝶と名付けた。

font-size: 1.1rem=11px

毛虫が終末と思う、その形態。救世主は蝶と名付けた。

font-size: 1.0rem=10px

毛虫が終末と思う、その形態。救世主は蝶と名付けた。

font-size: 0.9rem=9px

毛虫が終末と思う、その形態。救世主は蝶と名付けた。

font-size: 0.8rem=8px

毛虫が終末と思う、その形態。救世主は蝶と名付けた。

font-size: 0.7rem=7px

毛虫が終末と思う、その形態。救世主は蝶と名付けた。

font-size: 0.6rem=6px

毛虫が終末と思う、その形態。救世主は蝶と名付けた。

font-size: 0.5rem=5px

毛虫が終末と思う、その形態。救世主は蝶と名付けた。

font-size: 0.4rem=4px

毛虫が終末と思う、その形態。救世主は蝶と名付けた。

font-size: 0.3rem=3px

毛虫が終末と思う、その形態。救世主は蝶と名付けた。

font-size: 0.2rem=2px

毛虫が終末と思う、その形態。救世主は蝶と名付けた。

font-size: 0.1rem=1px

毛虫が終末と思う、その形態。救世主は蝶と名付けた。

color

bg: #fff;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #f7f7f7;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #f3f3f3;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #eaeaea;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #e6e6e6;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #dddddd;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #d9d9d9;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #cccccc;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #c0c0c0;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #b3b3b3;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #a6a6a6;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #9a9a9a;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #8d8d8d;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #808080;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #737373;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #666666;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #5a5a5a;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #4d4d4d;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #404040;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #333333;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #262626;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #191919;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #0c0c0c;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff

bg: #000000;

#000000

#0c0c0c

#191919

#262626

#333333

#404040

#4d4d4d

#5a5a5a

#666666

#737373

#808080

#8d8d8d

#9a9a9a

#a6a6a6

#b3b3b3

#c0c0c0

#cccccc

#d9d9d9

#dddddd

#e6e6e6

#eaeaea

#f3f3f3

#f7f7f7

#ffffff