เว็บโหลดไวขึ้นด้วย Web Font แบบ WOFF 2.0

บทความนี้เราจะมาทำความรู้จักกับ web font แบบใหม่ที่มีชื่อว่า WOFF 2.0 กันครับ โดยจุดเด่นของมันนั้นอยู่ที่ขนาดของไฟล์ที่จะเล็กกว่าไฟล์ WOFF แบบเดิมพอสมควรเลยทีเดียว เรามาดูกันครับว่า font แบบ WOFF 2.0 นี้มันมีวิธีใช้งานอย่างไร ?

รู้จักกับ Font แบบ WOFF

โดยปกติแล้ว เวลาเราจะใช้ font อื่นๆ ที่อาจไม่มีในเครื่องของ user เราก็จะระบุไฟล์ของ font ที่จะใช้ผ่าน @font-face rule ใช่มั้ยครับ แต่ด้วยความหลากหลายของ web browser ที่แต่ละเจ้านั้นต่างก็รองรับ font นามสกุลไม่เหมือนกัน เราก็เลยต้องมาเสียเวลาเตรียมไฟล์มาให้ครบทุกนามสกุลเลย ไม่ว่าจะเป็น eot, ttf และที่ขาดไม่ได้เลยก็คือ woff ครับ

font แบบ woff ที่เราใช้กันในปัจจุบันมักจะเป็นแบบ WOFF 1.0 ครับ โดยลักษณะเด่นของมันนั้นอยู่ที่การบีดอัดข้อมูลซึ่งส่งผลให้ font แบบ woff นี้มีขนาดค่อนข้างเล็กเมื่อเทียบกับ font แบบอื่นๆ และที่สำคัญก็คือ web browser ส่วนใหญ่ในตอนนี้รองรับ woff หมดแล้วครับ ถ้าเราไม่แคร์พวก IE8 หรือ Android Browser แล้ว เราก็สามารถใช้แต่ woff อย่างเดียวได้เลย

WOFF 2.0 คืออะไร

ทีนี้เรามาพูดถึง WOFF 2.0 กันบ้างครับ อย่างที่เล่าไปแล้วว่าจุดเด่นของ woff นั้นคือการบีดอีดข้อมูล ซึ่งแน่นอนว่า WOFF 2.0 นี้สามารถบีบอัดได้เล็กลงกว่าเดิมอีกครับ โดย WOFF 2.0 นี้จะมีขนาดเล็กกว่า WOFF 1.0 ถึงประมาณ 30–40% เลยทีเดียว ยิ่ง font ของเรามีขนาดใหญ่ด้วยแล้ว การแปลงเป็น WOFF 2.0 ก็จะยิ่งเห็นความต่างชัดเจนมากขึ้นครับ

วิธีการแปลง

สำหรับการแปลง font เดิมที่เรามีอยู่ให้กลายเป็นแบบ WOFF 2.0 นั้นก็ไม่ยากเลยครับ แค่เราใช้ service อย่าง Font Squirrel หรือจะ tool พวก ttf to woff2 converter หรือ woff to woff2 converter ก็ได้ครับ

Browser Support

caniuse.com บอกไว้ว่า web browser ที่รองรับ WOFF 2.0 แล้วมีดังนี้ครับ

• Google Chrome 36+
• Opera 23+

ก็ต้องยอมรับครับว่า WOFF 2.0 นั้นยังค่อนข้างใหม่อยู่พอสมควร web browser ที่รองรับแล้วเลยมีไม่ค่อยมากเท่าไรนักครับ (แต่ถ้าจะคิดเป็นสัดส่วนของผู้ใช้ทั้งหมดแล้ว ก็ถือว่าเยอะอยู่นะครับ เพราะว่าคนไทยใช้ Chrome กันเยอะมาก)

เริ่มใช้ WOFF 2.0 ตั้งแต่วันนี้ !

ถึงแม้ว่า web browser ส่วนใหญ่จะยังไม่รองรับ แต่เราก็สามารถใช้ WOFF 2.0 ได้ตั้งแต่วันนี้เลยครับ เพียงแต่เราจะต้องกำหนด fallback เอาไว้ด้วยเท่านั้นเอง โชคดีที่ @font-face rule มีกลไก fallback ให้ในตัวอยู่แล้วครับ ที่เราต้องทำก็เพียงแค่เพิ่ม url ของไฟล์ WOFF 2.0 เอาไว้เหนือ url ของไฟล์ WOFF 1.0 เท่านั้นเองครับ

@font-face {
    font-family: SiamHTML;
    src: url('siamhtml.eot');
    src: url('siamhtml.eot?') format('embedded-opentype'),
         url('siamhtml.woff2') format('woff2'), // เพิ่มไฟล์ WOFF 2.0 ไว้ข้างบน WOFF 1.0
         url('siamhtml.woff') format('woff'),
         url('siamhtml.ttf') format('truetype');
}

จากโค้ด @font-face rule ด้านบน ถ้า web browser ไหนรองรับ WOFF 2.0 แล้ว มันก็จะเลือกเอาแบบ WOFF 2.0 ไปใช้แทน WOFF 1.0 ครับ เพียงเท่านี้เว็บเราก็จะโหลดเร็วขึ้นอีกนิดนึง ถึงแม้จะไม่มากนัก แต่ก็เร็วกว่าไม่ได้ทำแน่นอนครับ