background

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

4 months ago ◦ 625 Views

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

ใช้งาน 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 แบบง่ายๆ ซึ่งสามารถนำไปประยุกต์กันต่อได้เลยนะครับ




#tutorial #ionic #googlefonts #scss #fonts

View count: 625
  • avatar
  • Save Pongsiri ศิลปินด้านพัฒนาซอฟต์แวร์ มีเป้าหมายคือพัฒนาตัวเองให้ยืดหยุ่นที่สุด ชอบความเรียบง่าย,ดนตรี,กีฬา และแมว