ใช้งาน Google Fonts กับ Ionic

ฟอนต์ในแอพมันไม่สวยทำไงดี? บทความนี้ ถึงวิธีการใช้งาน Google Fonts กับ ionic กันครับ เริ่มเลย

1. เริ่มจากสร้างแอพใหม่ หรือใครมีโปรเจคอยู่แล้วก็ cd เข้าไปได้เลย

ionic start IonicWithGoogleFonts blank
cd IonicWithGoogleFonts

2. ไปที่ https://fonts.google.com/?subset=thai แล้วเลือกฟอนต์ไทย

3. คลิก + ที่ฟอนต์ที่ต้องการ จะมีบาร์ของฟอนต์ที่เลือกขึ้นมาด้านล่าง

4. copy เฉพาะ URL ของฟอนต์ไปเปิดใน browser แท็บใหม่ ในตัวอย่างนี้คือ https://fonts.googleapis.com/css?family=Mitr

5. ดูในส่วนของ /* thai */ มอง url ของไฟล์นามสกุล .woff2 แล้ว copy เฉพาะ url นั้นมาเปิดใน browser อีกครั้งครับ คราวนี้มันจะดาวน์โหลดมาที่เครื่อง

6. เปลี่ยนชื่อเป็นชื่อฟอนต์.woff2 เช่น mitr.woff2

7. ในโปรเจคของเราให้เข้าไปที่โฟลเดอร์ src/assets แล้วสร้างโฟลเดอร์ใหม่ชื่อ fonts

8. copy ไฟล์ mitr.woff2 (ชื่อไฟล์ที่เราตั้ง) มาไว้ที่โฟลเดอร์ src/assets/fonts

9. define ฟอนต์ของเราที่ไฟล์ src/app/app.scss เพิ่มโค้ดตามตัวอย่างด้านล่างนี้

@font-face{ 
    font-family: Mitr;  
    src:url('../assets/fonts/mitr.woff2')format('woff2');
} 
*{ 
    font-family: Mitr;
}

10. รัน ionic serve ดูผลลัพธ์กันครับ

ionic serve

สรุป

ตัวอย่างนี้เป็นการทดสอบใช้ฟอนต์ภาษาไทยจาก google fonts แบบง่ายๆ ซึ่งสามารถนำไปประยุกต์กันต่อได้เลยนะครับ

Originally published at ideagital.com.