ใช้ฟอนต์สำหรับเว็บใน Seed Fonts

การแปลงฟอนต์ให้รองรับการแสดงบนเว็บ (woff2) และอัปโหลดขึ้นเว็บสำหรับปลั๊ฏอิน Seed Fonts

1. Convert to .woff2

แปลงฟอนต์ให้รองรับการแสดงบนเว็บ (woff2) โดยไปที่ https://www.fontsquirrel.com/tools/webfont-generator แล้วอัปโหลดฟอนต์ที่ต้องการไป โดนเลือกตัวเลือกตามนี้

2. Create font.css

ดาวน์โหลดไฟล์จากข้อ 1 แล้ว unzip เปลี่ยนชื่อไฟล์ stylesheet.css เป็น font.css ให้เปิดฟอนต์ขึ้นมาเพื่อดูชื่อฟอนต์

หากต้องการให้โหลดเร็ว สามารถเพิ่ม font-display: fallback; ได้ (รายละเอียดที่บล็อก font-display)

คำแนะนำ: ให้เปลี่ยนชื่อฟอนต์เป็น ตัวอักษรเล็กไม่มีเว้นวรรค (ใช้ร่วมกับ _ หรือ - ได้) จะได้ตั้งชื่อโฟลเดอร์ได้ตรงกับชื่อฟอนต์

3. Define Font Name & Weight

ให้ใส่ Font Name โดยดึงค่าจาก font-family มาใส่ (แนะนำให้เป็น ตัวอักษรเล็กไม่มีเว้นวรรค) โดยใช้โค้ดตามนี้

/*
 Font Name: iannnnn-duck
 Weights: 300, 400, 700
*/

โดยใช้เลขน้ำหนัก ตาม font-weight ดังนี้

Weight	Description
100	Thin (Hairline)
200	Extra Light (Ultra Light)
300	Light
400	Normal (Regular)
500	Medium
600	Semi Bold (Demi Bold)
700	Bold
800	Extra Bold (Ultra Bold)
900	Black (Heavy)
950	Extra Black (Ultra Black)

4. Upload font folder

เปลี่ยนชื่อโฟลเดอร์นี้ให้ตรงกับชื่อฟอนต์ ตัวอักษรเล็กไม่มีเว้นวรรค

เช่น ชื่อว่า font-name ก็นำขึ้นไปไว้ที่

/wp-content/upload/fonts/font-name/

5. Choose Font

ระบบจะแสดงฟอนต์ในรายการดังรูป สามารถเลือกใช้งานได้เลย