アトリエロワ

FOUT (Flash of Unstyled Text) の症状

Adobe Fontを読むと、ブラウザを開いた時に一瞬fontが落ち着かず、その後に指定したフォントになる。
開いた瞬間から指定したフォントにする指定。
（下記は全てする必要は無し）

非同期読み込みをやめて同期にする

jsに

var config = {
  kitId: 'cts4fab',
  scriptTimeout: 3000,
  async: true,
};

wf-loading クラスを使って読み込み中に非表示にする

Adobe Fonts は <html> に自動でクラスを付与する。
wf-loading → 読み込み中
wf-active → フォント読み込み完了
wf-inactive → フォント読み込み失敗
CSS で読み込み中のテキストを隠しておく方法です。
cssに

.wf-loading body {
  visibility: hidden;
}

preload で CSS を先読みする（optional）

htmlに

<link rel="preload" href="https://use.typekit.net/cts4fab.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://use.typekit.net/cts4fab.css"></noscript>

フォントスタックの代替を軽めにしておく

代替フォントが太かったりするとFOUT 時に文字が一瞬太く見える場合がある。
cssに

* {
  font-family: "fot-udkakugo-large-pr6n", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 400;  /* fallbackフォントの太さを指定 */
}

HOME > html+css > FOUT (Flash of Unstyled Text) の症状

html+css

html+css

+ More