การใช้งาน CSS @font-face rule: นำเข้าแบบอักษรเว็บ

กฎ @font-face

กฎ @font-face ใช้สำหรับอธิบายลักษณะแบบอักษร (font face) อย่างครบถ้วนเพื่อใช้ในเอกสาร รวมถึงกำหนดที่อยู่ดาวน์โหลดแบบอักษร

ตัวอย่างการใช้งาน

<style>
  @font-face {
    font-family: "Scarborough Light";
    src: url("https://www.font.site/s/scarbo-lt");
  }

  @font-face {
    font-family: Santiago;
    src: local("Santiago"),
         url("https://www.font.site/s/santiago.tt") format("truetype");
    unicode-range: U+??, U+100-220;
    font-size: all;
    font-family: sans-serif;  /* fallback */
  }
</style>

คำอธิบายคุณสมบัติภายใน @font-face

รูปแบบสมัยใหม่ (Modern Syntax)

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;  /* สำคัญ: ป้องกัน FOIT */
}

คุณสมบัติ font-display

• auto - เริ่มต้นของบราวเซอร์
• block - บล็อกการแสดงผลสั้นๆ แล้วแสดง fallback
• swap - แสดง fallback ทันที แล้วสลับเมื่อโหลดเสร็จ (แนะนำ)
• fallback - คอมโปรไมส์ระหว่าง block และ swap
• optional - ใช้ fallback ถ้าโหลดช้า