Google Fontsを軽量化！～その弐～

7月の終わりがそろそろ近づいてくるころ…

こっちが大好きな7月！

ずーと夏であってほしい…

本格的に夏本番がスタートして日にちが経ちますが…

熱中症には気を付けてくださいね！

さてと、話題に入ろう！

Google Fontsを軽量化！～その弐～

Google Fonts「Noto Sans Japanese」の読み込むスピードが遅くて断念しましたが…

昨日は、ファイルをアップロードし、形式を「WWOF」に変換しましたね。

今回はサーバーにアップロードしてCSSに書き込む方法を教えますね。

今回の階層は「./font/」としてアップロードして、CSSに書き込む方法を教えますね。

ご参考までに。

@font-face {
	src: url("./font/NotoSansJP-Thin.woff") format("woff");
	font-family: "Noto Sans JP";
	font-style: 100;
	font-display: swap;
}
@font-face {
	src: url("./font/NotoSansJP-ExtraLight.woff") format("woff");
	font-family: "Noto Sans JP";
	font-style: 200;
	font-display: swap;
}
@font-face {
	src: url("./font/NotoSansJP-Light.woff") format("woff");
	font-family: "Noto Sans JP";
	font-style: 300;
	font-display: swap;
}
@font-face {
	src: url("./font/NotoSansJP-Regular.woff") format("woff");
	font-family: "Noto Sans JP";
	font-style: 400;
	font-display: swap;
}
body {
	font-family: "Noto Sans JP", "sans-serif";
}

font-displayプロパティはフォントファイルが読み込まれていない間に代替のフォントで表示する指定です。
詳しい解説は「MDN」のサイトに記載しております。
font-display
読み込みは十分早いですが、一応指定しておいといたほうがいいです。

これで最高速化にすることができました。

ただ、Google Fontsの中身が日々進化しているので、どうなるか観察していきながら次のステップに進んでいきましょう！

ほかに何か高速化する方法を模索しながらまたご紹介しますね。

ではまた！