Variable Fonts คือไฟล์ฟอนต์ OpenType ที่รวมหลาย “น้ำหนัก/ความกว้าง/เอียง/ขนาดออปติคัล” ไว้ในไฟล์เดียว ปรับได้ด้วย CSS ช่วยลดจำนวนไฟล์และเพิ่มความยืดหยุ่นในแบรนด์.

Variable Fonts คืออะไร? คู่มือสำหรับเว็บไซต์ธุรกิจ (2025)

สรุปสั้น Variable Fonts ใช้กลไก OpenType Font Variations เพื่อให้ฟอนต์เดียวปรับเปลี่ยนได้ตาม “แกน” (axes) เช่น wght น้ำหนัก, wdth ความกว้าง, opsz ออปติคัลไซซ์, slnt เอียง, ital ตัวเอียง ควบคุมผ่าน CSS ตามมาตรฐาน W3C/MDN.

การทำงานของ Variable Fonts (แนวคิดแกน/ค่า)

ภายในไฟล์จะระบุช่วงค่าของแต่ละแกน (เช่น น้ำหนัก 100–900) และอินสแตนซ์ที่ตั้งชื่อไว้; เบราว์เซอร์จะทำการอินเตอร์โพเลตทรงตัวอักษรภายในค่านั้น ๆ ทำให้เกิด “สเต็ป” ที่ละเอียดมากขึ้น.

ตาราง: แกนที่พบบ่อย + การแมปกับ CSS

* ช่วงค่าจริงอ้างอิงจากทะเบียนแท็กแกนของ OpenType ขึ้นอยู่กับแต่ละฟอนต์โดยเฉพาะ.

ตัวอย่างโค้ดใช้งาน (โปรดักชันเบื้องต้น)

<!-- 1) Preload ฟอนต์ -->
<link rel="preload" href="/fonts/YourFontVar.woff2" as="font" type="font/woff2" crossorigin>

<!-- 2) ประกาศ @font-face สำหรับ Variable Font -->
<style>
@font-face{
  font-family: "YourFont";
  src: url("/fonts/YourFontVar.woff2") format("woff2");
  font-weight: 100 900;          /* ช่วง wght ที่รองรับ */
  font-stretch: 75% 125%;        /* ช่วง wdth (ถ้ามี) */
  font-style: normal;
  font-display: swap;
}
:root{
  --brand-wght: 600;
}
h1{
  font-family: "YourFont", system-ui, -apple-system, Segoe UI, sans-serif;
  font-weight: var(--brand-wght);
  font-optical-sizing: auto;     /* ปรับรายละเอียดตามขนาดตัวอักษร */
}
.small-note{
  font-family: "YourFont";
  font-variation-settings: "wght" 350, "wdth" 95; /* ใช้เมื่อจำเป็น */
}
</style>

คุณสมบัติ font-variation-settings และ font-optical-sizing ถูกกำหนดโดยสเปค CSS Fonts ระดับ 4.