web関連

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

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

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-display」プロパティは有名どころのブラウザであればサポートしているけど、ieとEdgeはサポートしてないみたいっすね
Can I use

こっからメモ:そもそも「@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';
}
上記コードはどういう意味だったか覚えてないけどWindowsとMacで同じように游ゴシックを見えるようにするコード

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

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

どこかで使う機会がある事を願っての備忘録