【css】webフォントの読み込みが遅い時の対応方法

「font-display: swap;」を使うといいらしい

「@font-face」の中で使用する「font-display: swap;」を使うとwebフォントの読み込みに時間がかかるようだったらブラウザのデフォルトのフォントを読み込んで表示されるまでの間をつないでくれるらしい

「@font-face」と一緒に使う

@font-face {
  font-family: "任意のFont Name";
  font-weight: 400;
  font-style: normal;
  src: url("../font-name.woff2") format("woff2");
  font-display: swap;//今回使う予定だったプロパティ
}

こっからメモ：そもそも「@font-face」使わない？

「@font-face」内で使う「font-display」プロパティなんだけど僕の知ってる限りだと使う機会がない気がしたのでメモ

「fontplus」だと「@font-face」の指定できない？

今回「fontplus」のwebフォントを利用していて「fontplus」のサーバーが重くなったのかテキスト表示に時間がかかりwebフォントが読み込まれるまでその部分が空白になっていたのが発端で調べていたんだけど「fontplus」ってスクリプトタグでファイル読み込んだら「font-family」で該当のフォント名を指定するだけなんだよなぁ

//fontplusが発行するスクリプトタグ
<script type="text/javascript" src="//webfont.fontplus.jp/accessor/script/fontplus.js?○○××□□△△　
" charset="utf-8"></script>
//cssでフォント名を指定すれば使える
css{
	font-family:'フォント名';
}

「Google Fonts」は「@font-face」必要ない？

頻繁にGoogleの提供しているwebフォントを利用してるけど、「Google Fonts」はそもそも表示が早いか、google側で「font-display」指定されているのかフォントが読み込まれるまでテキストの部部が空白になるようなことは無かった

//googlefontsで発行されるコード
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
//cssでフォント名を指定すれば使える
css{
	font-family:'Noto Sans JP';
}

游ゴシックを使うときに一応「@font-face」は使う

WindowsとMacで游ゴシックの見え方が細かったりちょうど良かったりと全然違うので、一応書いているコードがあってそこで「@font-face」使うけどそもそもブラウザに実装されているフォントだから表示スピードが普通に早いから指定する意味がない気がする

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
css{
	font-family:'Yu Gothic';
}

「fontplus」「googlefonts」「游ゴシック」で「font-display」使用しない…

そもそもフォントファイルをサーバーにアップロードして使用するときしか使わない気がしてきた…