@font-face และ FOIT / FOUT

โหลดไฟล์ฟอนต์เอง

@font-face บอกเบราว์เซอร์ว่ามีฟอนต์ชื่ออะไร และไฟล์อยู่ที่ไหน

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

FOIT และ FOUT แบบสั้น

FOIT (Flash of Invisible Text) — ข้อความหายไปชั่วคราวระหว่างรอฟอนต์

FOUT (Flash of Unstyled Text) — เห็นฟอนต์สำรองก่อน แล้วกระตุกเป็นฟอนต์เว็บ

font-display: swap มักแลกเป็น FOUT แทนการซ่อนข้อความนาน ๆ