If you're serving TTF fonts on your website, you're sending roughly 30% more data than you need to. WOFF2 delivers the exact same typeface in a significantly smaller file, and every modern browser supports it. Here's how to convert — and why it matters for your site's performance.
ทำไมถึงใช้ WOFF2?
WOFF2 (Web Open Font Format 2.0) ใช้การบีบอัด Brotli เพื่อลดขนาดไฟล์แบบฟอนต์ลงประมาณ 30% เมื่อเทียบกับ TTF โดยไม่สูญเสียคุณภาพ ตัวอักษร ตัวชี้ ระยะห่างระหว่างตัวอักษร และคุณสมบัติการจัดรูปแบบทั้งหมดถูกเก็บรักษาไว้เหมือนเดิม เมื่อบราวเซอร์โหลดไฟล์ WOFF2 มันจะถอดบีบอัดเป็นข้อมูลเดียวกับ TTF ต้นฉบับ
ผลกระทบต่อประสิทธิภาพเป็นเรื่องจริง ฟอนต์เป็นทรัพยากรที่ขัดขวางการเรนเดอร์ — เบราว์เซอร์จะไม่แสดงข้อความจนกว่าฟอนต์จะโหลดเสร็จ สิ่งนี้หมายความว่าฟอนต์ขนาดเล็ก 120KB TTF ที่เปลี่ยนเป็น WOFF2 84KB จะทำให้ข้อความปรากฏเร็วขึ้น โดยเฉพาะบนการเชื่อมต่อมือถือ Google Core Web Vitals วัดสิ่งนี้โดยตรง: ฟอนต์ขนาดเล็กช่วยปรับปรุง Largest Contentful Paint (LCP) และลด Cumulative Layout Shift (CLS) จากการสลับฟอนต์
การรองรับเบราว์เซอร์เป็นไปอย่างทั่วถึง Chrome Firefox Safari และ Edge รองรับ WOFF2 ทั้งหมด เบราว์เซอร์ที่ไม่รองรับคือ Internet Explorer และเบราว์เซอร์แอนดรอยด์เก่า ซึ่งคิดเป็นสัดส่วนต่ำกว่า 1% ของการจราจรทั่วโลก
วิธีแปลงไฟล์
ใช้ WOFF2 ใน CSS
Once you have your WOFF2 file, reference it in your stylesheet. List WOFF2 first with a TTF fallback for maximum compatibility:
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.ttf') format('truetype');
font-display: swap;
}คำสั่ง font-display: swap บอกเบราว์เซอร์ให้แสดงข้อความสำรองทันที และเปลี่ยนไปใช้แบบอักษรที่กำหนดเมื่อโหลดเสร็จ ช่วยป้องกันข้อความที่ไม่เห็นระหว่างการโหลดแบบอักษร
การปฏิบัติตามใบอนุญาตแบบฟอนต์
ใบอนุญาตฟอนต์เชิงพาณิชย์หลายฉบับมีข้อกำหนดที่จำกัดการอัปโหลดไฟล์ฟอนต์ไปยังบริการเว็บของบุคคลที่สาม ซึ่งสร้างปัญหา: คุณต้องแปลงเป็น WOFF2 เพื่อประสิทธิภาพ แต่เครื่องมือแปลงส่วนใหญ่ต้องการอัปโหลดฟอนต์ไปยังเซิร์ฟเวอร์
แน่นอน, เสมอ ตรวจสอบเงื่อนไขใบอนุญาตฟอนต์เฉพาะของคุณ แต่ลักษณะเฉพาะที่ไม่ส่งไฟล์ไปยังเซิร์ฟเวอร์ของ Morph ช่วยกำจัดปัญหาความเข้ากันได้ที่พบบ่อยที่สุด
การแปลงแบบฟอนต์อื่นๆ
Morph ยังรองรับการแปลง OTF เป็น WOFF2, WOFF เป็น WOFF2, TTF เป็น OTF และการแปลงอื่น ๆ ทุกแบบระหว่าง TTF, OTF, WOFF และ WOFF2 ต้องการ ฟอนต์ฟรี เพื่อเริ่มต้นหรือไม่? ค้นหา ฟอนต์ฟรีมากกว่า 1,500 แบบ ในไลบรารีฟอนต์ของ Morph