กลยุทธ์โหลดฟอนต์เว็บที่ “เร็วและไม่ทำเลย์เอาต์สั่น”: self-host WOFF2, ซับเซ็ตด้วย unicode-range, ตั้ง font-display ให้เหมาะ (swap/optional), preload ฟอนต์สำคัญ, จัด fallback ใกล้เคียงพร้อม metric overrides เพื่อลด CLS และใช้ CSS Font Loading API คุมลำดับการแสดงผล.

Web Font Loading Strategy: โหลดเร็ว ไร้ FOIT/FOUT และ CLS ต่ำ

เป้าหมาย ให้ข้อความอ่านได้ทันที (ลด FOIT), ไม่มีการกระพริบหนัก (คุม FOUT), และไม่เกิดเลย์เอาต์ขยับจนเสียคะแนน Core Web Vitals — โดยใช้ self-host WOFF2, preload, font-display, fallback stack และ metric overrides อย่างถูกวิธี

ตารางสรุปวิธีหลัก → ผลต่อ CWV

โค้ดตัวอย่างที่ควรมี

1) Preload + @font-face (Variable font, self-host)

<link rel="preload" as="font" type="font/woff2"
      href="/fonts/Inter-Variable.woff2" crossorigin>
<style>
@font-face{
  font-family:"Inter";
  src:url("/fonts/Inter-Variable.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;            /* หรือ optional สำหรับเครือข่ายช้า */
  size-adjust:100%;
  ascent-override:90%;
  descent-override:10%;
  line-gap-override:0%;
}
:root{ font-synthesis-weight: none; font-synthesis-style: none; }
body{ font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol"; }
</style>

2) ซับเซ็ตภาษา (unicode-range)

@font-face{
  font-family:"BrandThai";
  src:url("/fonts/BrandThai.woff2") format("woff2");
  font-display:swap;
  unicode-range: U+0E00-0E7F; /* Thai */
}
@font-face{
  font-family:"BrandLatin";
  src:url("/fonts/BrandLatin.woff2") format("woff2");
  font-display:swap;
  unicode-range: U+000-5FF; /* Basic Latin + Latin-1 Supplement */
}