คุณกำลังโหลดฟอนต์ผิดวิธีอยู่ (และมันกำลังทำให้ประสิทธิภาพแย่ลง)

• เว็บฟอนต์ เป็นองค์ประกอบด้านภาพของเว็บไซต์ที่กำหนดทั้งแบรนด์และประสบการณ์ผู้ใช้ และส่งผลโดยตรงต่อ ประสิทธิภาพ และ การเข้าถึง
• วิธีโหลดฟอนต์ที่ไม่ถูกต้องทำให้เกิดปัญหา FOUT (ข้อความกะพริบโดยไม่มีสไตล์) หรือ FOIT (ข้อความกะพริบแบบมองไม่เห็น) ซึ่งส่งผลลบต่อ Core Web Vitals
• ฟอร์แมต WOFF2 เป็นฟอร์แมตฟอนต์สมัยใหม่ที่มีประสิทธิภาพ รองรับโดยเบราว์เซอร์สมัยใหม่ส่วนใหญ่ และช่วยปรับปรุงประสิทธิภาพด้วยการตัดฟอร์แมตแบบ legacy ที่ไม่จำเป็นออกไป
• กลยุทธ์อย่าง การทำฟอนต์ซับเซ็ต และ preload เป็นสิ่งสำคัญในการลดการส่งข้อมูลที่ไม่จำเป็นและเพิ่มความเร็วในการโหลดหน้าเว็บ
• การใช้ system font stack และ CSS descriptor ช่วยลด layout shift (CLS) ระหว่างการโหลดฟอนต์ และมอบประสบการณ์ใช้งานที่เสถียร

---

ประวัติย่อของเว็บฟอนต์

เว็บฟอนต์เป็นองค์ประกอบสำคัญของการออกแบบเว็บและประสบการณ์ผู้ใช้ แต่ถึงอย่างนั้นหลายคนก็ยังใช้งานมันอย่างไม่ถูกวิธี ด้านล่างคือสรุปพัฒนาการของเว็บฟอนต์

• ยุคของ "web safe"

  • ในเว็บยุคแรกสามารถใช้ได้แค่ web safe font อย่าง Arial, Times New Roman และฟอนต์แบบกำหนดเองต้องถูกแทนด้วยรูปภาพ
  • การเรนเดอร์ฟอนต์ต่างกันไปตามแต่ละเบราว์เซอร์ ทำให้คงดีไซน์ให้สม่ำเสมอได้ยาก

• แฮ็กก่อนยุค @font-face: sIFR และ Cufón

  • sIFR: ใช้ Flash เพื่อเรนเดอร์ข้อความแบบไดนามิก แต่มีขนาดใหญ่และด้อยด้าน การเข้าถึง
  • Cufón: แปลงฟอนต์เป็นเวกเตอร์กราฟิกแล้วฝังด้วย JavaScript แต่ช้าและยังมีปัญหาด้านการเข้าถึง

• การมาของ @font-face

  • @font-face ทำให้สามารถฝังฟอนต์แบบกำหนดเองด้วย CSS ได้ แต่ซับซ้อนเพราะแต่ละเบราว์เซอร์ต้องการฟอร์แมตต่างกัน เช่น EOT, SVG font, TTF/OTF
  • ยังมีปัญหาเรื่องไลเซนส์ฟอนต์และการคัดลอกแบบผิดกฎหมายอย่างแพร่หลาย

• บริการเชิงพาณิชย์: Typekit และรายอื่น ๆ

  • Typekit (ปัจจุบันคือ Adobe Fonts) เป็นบริการแบบสมัครสมาชิกที่แก้ปัญหาเรื่องไลเซนส์และความเข้ากันได้ โดยให้บริการฟอนต์ผ่าน JavaScript snippet
  • รูปแบบการพึ่งพาสคริปต์จาก third party ยังคงสืบเนื่องมาจนถึงปัจจุบัน

• แฮ็กเพื่อความเข้ากันได้และวิธีเลี่ยงปัญหา

  • ต้องโฮสต์หลายฟอร์แมต หรือแก้ไขด้วย JavaScript เพื่อรับมือกับ FOUT และ FOIT
  • เคยมีความพยายามใช้ icon font เพื่อแก้ปัญหาการขาด glyph

• Google Fonts และกระแส "ฟรีฟอนต์"

  • Google Fonts มอบความสะดวกในการโหลดฟอนต์ผ่านฟอนต์ไลเซนส์แบบเปิดที่ให้ใช้ฟรี แต่ก็ก่อปัญหาใหม่ทั้งเรื่อง การละเมิด GDPR และความเร็วในการโหลดที่ช้า
  • ต่างจากฟอนต์เชิงพาณิชย์ที่มีข้อจำกัดด้านไลเซนส์จนปรับแต่งได้ยาก Google Fonts เปิดให้ใช้งานได้อย่างอิสระ

ฟอนต์ทำงานอย่างไร (พื้นฐาน)

ฟอนต์ไม่ใช่แค่การตั้งค่า CSS ธรรมดา แต่เป็นองค์ประกอบที่เกี่ยวข้องลึกกับ rendering pipeline ของเบราว์เซอร์

• ฟอร์แมต: จาก TTF ถึง WOFF2

  • TTF/OTF: ฟอร์แมตขนาดใหญ่ที่เน้นการใช้งานบนเดสก์ท็อป
  • WOFF2: ฟอร์แมตเว็บฟอนต์สมัยใหม่ที่มีประสิทธิภาพ ใช้ Brotli compression และเหมาะกับโปรเจกต์ส่วนใหญ่

• Rendering pipeline

  • การโหลดฟอนต์ผ่านขั้นตอนต่าง ๆ ได้แก่ registration, style resolution, font matching, glyph coverage, request, display stage และ decoding and shaping
  • การตั้งค่า font-display (swap, block, fallback, optional) เป็นตัวกำหนดวิธีแสดงผลข้อความ

• Metrics

  • ค่าอย่าง Ascent, descent, line gap ใช้กำหนดความสูงและระยะห่างของฟอนต์
  • เมื่อมีการสลับฟอนต์ ความไม่ตรงกันของ metrics อาจทำให้เกิด layout shift (CLS)

• Synthetic styles

  • หากเบราว์เซอร์หา font weight หรือ style ที่ร้องขอไม่พบ มันจะสร้างความหนาหรือตัวเอียงปลอมขึ้นมาเอง ซึ่งลดคุณภาพลง
  • ป้องกันการสร้างสไตล์ปลอมได้ด้วย font-synthesis: none;

• Glyph coverage

  • ฟอนต์ไม่ได้มีครบทุกตัวอักษรเสมอไป และ glyph ที่หายไปจะถูกเรนเดอร์ด้วย ฟอนต์สำรอง ทำให้เกิดปัญหาด้านความสม่ำเสมอ
  • ใช้ unicode-range เพื่อกำหนดให้โหลดเฉพาะ glyph ที่จำเป็น

พื้นฐานด้านประสิทธิภาพและกลยุทธ์

ฟอนต์ส่งผลต่อ critical rendering path และหากจัดการไม่ดีอาจทำให้ประสิทธิภาพลดลง

• ขนาดไฟล์

  • ฟอนต์แฟมิลีเดียวอาจมีขนาดได้ถึง 800KB และการมี glyph ที่ไม่จำเป็นทำให้สิ้นเปลืองข้อมูล
  • ใช้ font subsetting เพื่อส่งเฉพาะ glyph ที่ต้องใช้และปรับขนาดให้เหมาะสม

• Layout shift

  • ความต่างของ metrics ระหว่างฟอนต์สำรองกับฟอนต์แบบกำหนดเองทำให้เกิด CLS
  • ใช้ CSS descriptor อย่าง size-adjust, ascent-override เพื่อทำให้เลย์เอาต์เสถียร

• CSS descriptor สมัยใหม่

  • font-display: swap; จะแสดงฟอนต์สำรองทันทีและช่วยให้การเรนเดอร์เสถียร
  • ใช้ unicode-range เพื่อโหลดเฉพาะ glyph ที่จำเป็นต่อสคริปต์นั้น ๆ

Variable fonts: คำสัญญากับความจริง

Variable font รองรับหลายสไตล์และหลาย weight ได้ในไฟล์เดียว จึงมีศักยภาพในการเพิ่มประสิทธิภาพ

• คำสัญญา

  • รวมไฟล์แบบ static หลายไฟล์ให้เหลือไฟล์เดียว
  • ทำ responsive typography ที่ปรับตามขนาด viewport ได้แบบไดนามิก

• ความจริง

  • หากใช้ weight ไม่กี่แบบ variable font อาจหนักกว่า
  • การรองรับของเบราว์เซอร์ ยังจำกัดในบาง axis และอาจมีปัญหาเรื่องไลเซนส์

• กลยุทธ์ด้านประสิทธิภาพ

  • เลือกใช้เฉพาะ axis ที่จำเป็น และทำ subsetting แยกตามสคริปต์ เพื่อปรับขนาดไฟล์ให้เหมาะสม
  • ตรวจสอบว่ามีประโยชน์จริงเมื่อเทียบกับ static font หรือไม่

• ตัวอย่างการใช้ variable font axis ใน CSS

  @font-face {  
    font-family: "Acme Variable";  
    src: url("/fonts/acme-variable.woff2") format("woff2-variations");  
    font-weight: 100 900;  
    font-display: swap;  
  }  
  h1 {  
    font-family: "Acme Variable", system-ui, sans-serif;  
    font-weight: 700;  
  }  
  

System stack และ CDN

หากใช้ system font stack โดยไม่พึ่งฟอนต์แบบกำหนดเอง ก็จะได้ทั้งการโหลดทันทีและประสบการณ์ที่คุ้นเคย

• System font stack

  • สแตกที่ประกอบด้วยฟอนต์อย่าง -apple-system, Segoe UI ช่วยรักษาความสม่ำเสมอบนทุกแพลตฟอร์ม
  • ในการเรนเดอร์อีโมจิ system font มักให้ประสิทธิภาพที่ดีกว่า

• CDN และการโฮสต์โดย third party

  • Google Fonts อาจนำไปสู่การละเมิด GDPR ได้จากการรั่วไหลของข้อมูล
  • self-hosting ช่วยลดความล่าช้าจาก DNS lookup และควบคุมการแคชได้

ฟอนต์สำรองและการจับคู่

ฟอนต์สำรองเป็นตัวกำหนดประสบการณ์ผู้ใช้ก่อนที่ฟอนต์แบบกำหนดเองจะถูกโหลด จึงต้องออกแบบอย่างรอบคอบ

• การออกแบบฟอนต์สำรอง

  • ตั้งค่า x-height และ ความกว้างตัวอักษร ให้ใกล้เคียงฟอนต์แบบกำหนดเองเพื่อลด CLS
  • ใช้ font-size-adjust เพื่อปรับขนาดของฟอนต์สำรอง

• การจับคู่ฟอนต์แบบกำหนดเองกับฟอนต์สำรอง

  • เลือกฟอนต์ที่มีสัดส่วนใกล้เคียงกัน และใช้ การปรับ metrics เพื่อให้เลย์เอาต์เสถียร
  • ควรให้ความสำคัญกับ ความเสถียร และ การอ่านง่าย โดยคำนึงถึงความต่างของการเรนเดอร์ในแต่ละแพลตฟอร์ม

กลยุทธ์การ preload และการโหลด

กลยุทธ์การส่งฟอนต์มีผลอย่างมากต่อประสบการณ์ผู้ใช้

• ผลลัพธ์ของการโหลด

  • FOIT ทำให้ข้อความมองไม่เห็นบนเครือข่ายที่ช้า
  • font-display: swap; เป็นค่าเริ่มต้นที่ปลอดภัยเพราะจะแสดงฟอนต์สำรองทันที

• Preloading

  • ใช้ <link rel="preload" as="font"> เพื่อเริ่มโหลดฟอนต์ได้ทันที
  • ต้องมี CORS header และการจับคู่ URL ที่ถูกต้องตรงกัน

• Early Hints (HTTP 103)

  • เซิร์ฟเวอร์สามารถสั่งให้ดึงฟอนต์ก่อนส่ง HTML response ได้ จึงช่วยลดเวลาโหลด
  • ควรใส่ hint เฉพาะ critical font เพื่อเลี่ยงการเปลืองแบนด์วิดท์

• Font Loading API

  • Font Loading API ช่วยควบคุมการโหลดฟอนต์ได้ละเอียดในเว็บไซต์แบบไดนามิก

ฟอร์แมตไฟล์: WOFF2, WOFF, TTF และภาระของ legacy

WOFF2 เป็นฟอร์แมตที่มีประสิทธิภาพที่สุดสำหรับเว็บยุคใหม่ และในกรณีส่วนใหญ่ฟอร์แมตเดียวก็เพียงพอแล้ว

• ใช้แค่ WOFF2 เพื่อตัดฟอร์แมตที่ไม่จำเป็นออกไป
• ควรหลีกเลี่ยง การฝังแบบ base64 เพราะรบกวนการแคช

Icon fonts: Font Awesome และความผิดพลาดครั้งใหญ่

Icon font ไม่เหมาะกับเว็บสมัยใหม่เนื่องจากมีปัญหาทั้งด้านการเข้าถึงและประสิทธิภาพ

• SVG icon มีความหมายเชิงโครงสร้าง ยืดหยุ่น และตกแต่งด้วย CSS ได้
• หากยังใช้ icon font เดิมอยู่ ควรทำ subsetting และวางแผนเปลี่ยนไปใช้ SVG

นอกเหนือจากละติน: สคริปต์ที่ไม่ใช่ละติน, ภาษา RTL และอีโมจิ

สคริปต์ที่ไม่ใช่ละตินและ ภาษา RTL ต้องการ shaping และ metrics ที่ซับซ้อนกว่า

• เมื่อต้องทำ subsetting ควรคำนึงถึงลักษณะเฉพาะของแต่ละสคริปต์เพื่อเลี่ยงข้อผิดพลาดในการเรนเดอร์
• ควรใช้อีโมจิจาก system font เพื่อเพิ่มทั้งความสม่ำเสมอและประสิทธิภาพ

อนาคตของเว็บฟอนต์: มาตรฐานที่พัฒนาและความเสี่ยงสมัยใหม่

คุณสมบัติ CSS ใหม่ ๆ รวมถึง variable font และ color font กำลังยกระดับงาน typography บนเว็บ

• Font Loading API และ Early Hints ช่วยแก้ปัญหาความล่าช้าใน SPA
• ควรมองฟอนต์เป็น infrastructure และให้ความสำคัญกับประสิทธิภาพและการเข้าถึงเป็นอันดับแรก

เครื่องมือและการตรวจสอบ

ประสิทธิภาพของฟอนต์สามารถวัดได้ด้วยเครื่องมืออย่าง DevTools, Lighthouse, Glyphhanger

• ใช้เครื่องมือ font subsetting เพื่อลบ glyph ที่ไม่จำเป็น
• ใช้ Font Style Matcher เพื่อปรับ metrics ของฟอนต์สำรอง

คำประกาศเพื่อจัดการฟอนต์ให้ถูกต้อง

ฟอนต์ไม่ใช่แค่ของตกแต่ง แต่เป็นองค์ประกอบหลักของ ประสบการณ์ผู้ใช้ และ ประสิทธิภาพ

• ระบบต้องมาก่อน: เริ่มจาก system font stack ที่แข็งแรง
• ทำซับเซ็ตอย่างชาญฉลาด: ส่งเฉพาะ glyph ที่จำเป็น
• ใช้ WOFF2 เท่านั้น: ตัดฟอร์แมต legacy ออก
• เคารพสคริปต์ทั่วโลก: รองรับหลายภาษาและอีโมจิ
• การทดสอบสำคัญ: ทดสอบบนเครือข่ายและอุปกรณ์ที่หลากหลาย

ควรมองฟอนต์เป็นทั้ง คอนเทนต์ และ แบรนด์ และจัดการมันอย่างเข้มงวดในด้านประสิทธิภาพและการเข้าถึง

[nemorize]

Cufón เป็นชื่อที่ไม่ค่อยได้ยินมานานแล้วจริง ๆ 555