TTF, OTF, WOFF หรือ WOFF2: ควรใช้ฟอนต์รูปแบบไหน

คุณดาวน์โหลดฟอนต์มาทำโลโก้ แล้วได้โฟลเดอร์ที่มีไฟล์เต็มไปหมด ทั้ง TTF, OTF, WOFF และ WOFF2 โปรแกรมออกแบบรู้จักแค่ครึ่งเดียว เครื่องมือสร้างเว็บขอรูปแบบอื่น ส่วนเครื่องตัดก็ไม่รับไฟล์ที่เลือก ฟอนต์เดียวกันแท้ๆ ทำไมต้องมีถึงสี่แบบ

คู่มือนี้อธิบายว่าแต่ละรูปแบบใช้ทำอะไร ควรใช้แบบไหนในสถานการณ์ใด และแปลงไปมาได้อย่างไรในไม่กี่วินาที

ตัวแปลงฟอนต์แปลงฟอนต์ระหว่าง TTF, OTF, WOFF และ WOFF2 ได้ทีละหลายไฟล์

สี่รูปแบบในหนึ่งนาที

TTF (TrueType) รูปแบบฟอนต์เดสก์ท็อปคลาสสิกจาก Apple และ Microsoft ตัวอักษรวาดด้วยเส้นโค้งกำลังสอง ทุกระบบปฏิบัติการและเกือบทุกโปรแกรมติดตั้งและใช้งานได้

OTF (OpenType แบบเส้นขอบ PostScript) รูปแบบเดสก์ท็อปสมัยใหม่จาก Adobe และ Microsoft ตัวอักษรใช้เส้นโค้งกำลังสาม และไฟล์มักมีฟีเจอร์ด้านตัวอักษรเพิ่มเติม เช่น อักษรควบ ตัวพิมพ์ใหญ่ขนาดเล็ก และตัวอักษรทางเลือก นักออกแบบชอบมาก แต่บางโปรแกรมและเครื่องจักรยังรับเฉพาะ TTF

WOFF (Web Open Font Format) คือ TTF หรือ OTF ที่ถูกห่อและบีบอัดด้วย zlib ให้โหลดบนเว็บได้เร็วขึ้น เคยเป็นมาตรฐานของเว็บราวปี 2012

WOFF2 รูปแบบเว็บที่ใหม่กว่า ใช้การบีบอัด Brotli และวิธีเก็บกลีฟที่ฉลาดกว่า ไฟล์จึงมักเล็กกว่า WOFF ราว 30% และเล็กกว่า TTF 50–70% เบราว์เซอร์ปัจจุบันทุกตัวรองรับ

ควรใช้รูปแบบไหน

กฎง่ายๆ คือ ในเครื่องใช้ TTF หรือ OTF บนเว็บใช้ WOFF2 ไม่จำเป็นต้องใช้ฟอนต์ EOT หรือ SVG อีกแล้ว เพราะเบราว์เซอร์ที่ใช้รูปแบบเหล่านั้นหายไปนานแล้ว

วิธีสร้างเว็บฟอนต์จาก TTF หรือ OTF

1. เปิดเครื่องมือแปลง TTF เป็น WOFF2 แล้ววางทุกน้ำหนักที่ใช้ เช่น Regular, Medium และ Bold
2. รอประมาณหนึ่งวินาทีให้แต่ละไฟล์ถูกบีบอัด
3. ดาวน์โหลดไฟล์ WOFF2 ทีละไฟล์หรือรวมเป็น ZIP
4. คัดลอก CSS @font-face ที่เตรียมไว้แล้วไปวางในสไตล์ชีต

แปลง TTF เป็น WOFF2แปลงฟอนต์ TTF เป็นเว็บฟอนต์ WOFF2 พร้อม CSS @font-face

การเก็บฟอนต์ไว้บนเว็บไซต์ของคุณเองแทนการโหลดจากเซิร์ฟเวอร์ภายนอก ช่วยลดการเชื่อมต่อหนึ่งครั้ง ให้เบราว์เซอร์แคชฟอนต์พร้อมไฟล์อื่น และช่วยให้ Core Web Vitals ดีขึ้น ควรคง font-display: swap ไว้ใน CSS เพื่อให้ข้อความแสดงทันทีระหว่างที่ฟอนต์กำลังโหลด

วิธีติดตั้งเว็บฟอนต์ลงคอมพิวเตอร์

บางครั้งคุณมีแค่ไฟล์ WOFF2 เช่น จากธีมหรือชุดอัตลักษณ์แบรนด์ Windows และ macOS ติดตั้งไม่ได้ จึงต้องแปลงเป็น TTF ก่อน

แปลง WOFF2 เป็น TTFแปลงเว็บฟอนต์ WOFF2 เป็นไฟล์ TTF ที่ติดตั้งได้

จากนั้นบน Windows คลิกขวาที่ไฟล์ TTF แล้วเลือก Install หรือบน Mac ดับเบิลคลิกแล้วกด Install Font

เมื่อโปรแกรมรับเฉพาะ TTF

เครื่องตัด เกมบางเกม และโปรแกรมสำนักงานรุ่นเก่าไม่รับไฟล์ OTF การแปลง OTF เป็น TTF จะวาดเส้นโค้งใหม่ในรูปแบบ TrueType ที่ขนาดปกติตัวอักษรดูเหมือนเดิม ชื่อฟอนต์ ระยะห่าง และการจัดคู่ตัวอักษรยังอยู่ครบ แต่ฟีเจอร์ OpenType ขั้นสูงบางอย่าง เช่น ตัวอักษรทางเลือก อาจหายไป จึงควรเก็บ OTF ต้นฉบับไว้สำหรับงานออกแบบ

แปลง OTF เป็น TTFแปลงฟอนต์ OpenType OTF เป็น TrueType TTF

ตรวจสัญญาอนุญาตก่อนแปลง

การแปลงฟอนต์ไม่ได้เปลี่ยนเจ้าของ ฟอนต์ภายใต้ SIL Open Font License ซึ่งครอบคลุม Google Fonts ส่วนใหญ่ แปลงและใช้เชิงพาณิชย์ได้ ฟอนต์เชิงพาณิชย์มักแยกสิทธิ์สำหรับเดสก์ท็อปและเว็บ และฟอนต์ที่ดาวน์โหลดจากเว็บไซต์ของคนอื่นมักได้รับอนุญาตให้ใช้เฉพาะเว็บไซต์นั้น เครื่องมือดูฟอนต์จะแสดงข้อความลิขสิทธิ์และสัญญาอนุญาตที่บันทึกอยู่ในไฟล์

ดูฟอนต์ดูตัวอย่างฟอนต์ พร้อมชื่อ สัญญาอนุญาต และตัวอักษร

คำถามที่พบบ่อย

WOFF2 คุณภาพต่ำกว่า TTF ไหม ไม่ การบีบอัด WOFF2 เป็นแบบไม่สูญเสียข้อมูล ทุกกลีฟและทุกคู่ระยะห่างตัวอักษรยังเหมือนเดิมทุกประการ

แปลง WOFF2 กลับเป็น OTF ได้ไหม ถ้า WOFF2 สร้างจาก OTF การถอดรหัสจะได้เส้นขอบ PostScript กลับมา เครื่องมือของเราส่งออกเป็น TTF เพื่อให้เปิดได้ทุกที่

เว็บไซต์ต้องมีทั้ง WOFF และ WOFF2 ไหม เฉพาะเมื่อต้องรองรับเบราว์เซอร์รุ่นเก่ามาก เว็บไซต์ส่วนใหญ่ใช้แค่ WOFF2 ก็พอ

ฟอนต์ถูกอัปโหลดตอนแปลงไหม ไม่ การแปลงเกิดขึ้นในเบราว์เซอร์ ฟอนต์ที่มีลิขสิทธิ์หรือยังไม่เผยแพร่จึงยังอยู่ในคอมพิวเตอร์ของคุณ

เลือกรูปแบบให้เหมาะกับงาน เก็บไฟล์ต้นฉบับไว้ให้ดี แล้วฟอนต์ของคุณจะแสดงผลเหมือนกันทุกที่