เนื้อหานี้จะมาแนะนำแนวทางการเพิ่มฟอนท์สำหรับ
ใช้งานใน app กรณีเราอยากได้รูปแบบฟอนท์ที่ต้องการ
แสดงใน app เป็นแบบเฉพาะตัว หรือกรณีใช้กับฟอนท์ของ
ภาษาที่ไม่ได้เป็นภาษาสากลที่ทุกเครื่องต้องมี เราสามารถฝังฟอนท์
ที่ต้องการเข้าไปใน app เพื่อใช้งานได้ดังนี้
*ใช้เนื้อหาต่อเนื่องจากบทความ http://niik.in/961
เตรียมไฟล์ Fonts
ให้เราเตรียมไฟล์ fonts ที่ต้องการ โดยใน flutter จะรองรับ 2 นามสกุลไฟล์ คือ
.ttf หรือ .otf ในตัวอย่างประกอบเนื้อหานี้ จะใช้ฟอนท์ภาษาขืนหรือไทขืน มาเป็นตัวอย่าง
- ATaiThamKHNewV3-Normal.ttf
เมื่อได้ไฟล์แล้ว ให้เราสร้างโฟลเดอร์ assets > fonts ไว้ใน root ของโปรเจ็ค fluter ของเรา
สำหรับเก็บไฟล์ฟอนท์ที่จะใช้งาน ก็จะได้เป็นดังนี้
![](https://i.imgur.com/djejYCe.jpg)
กำหนดชื่อฟอนท์เพื่อใช้งาน
ต่อไปก็ให้เราเข้าไปเพิ่มการกำหนดชื่อฟอนท์สำหรับเรียกใช้งานในโปรเจ็คในไฟล์ pubspec.yaml
![](https://i.imgur.com/kJpTv1r.jpg)
แทรกในส่วนของการกำหนดฟอนท์ประมาณนี้
# The following section is specific to Flutter. flutter: fonts: - family: Taitham3 fonts: - asset: assets/fonts/ATaiThamKHNewV3-Normal.ttf
บันทึกไฟล์ เป็นอันเสร็จการกำหนดชื่อฟอนท์เพื่อใช้งาน
ตัวอย่างแนวทางการกำหนดค่าเพิ่มเติม
flutter: fonts: - family: Raleway fonts: - asset: fonts/Raleway-Regular.ttf - asset: fonts/Raleway-Italic.ttf style: italic - family: RobotoMono fonts: - asset: fonts/RobotoMono-Regular.ttf - asset: fonts/RobotoMono-Bold.ttf weight: 700
แนวทางการกำหนดค่า
- family จะเป็นส่วนของการกำหนดชื่อฟอนท์ ที่เราจะเรียกใช้งานผ่านค่า fontFamily property ของ
TextStyle object
- asset จะเป็นส่วนของการกำหนด path ของไฟล์ฟอนท์ ไฟล์ในโฟลเดอร์นี้จะถูกรวมไปใน app ด้วย
เมื่อมีการ build app เพื่อนำไปใช้งาน
- หนึ่งฟอนท์สามารถมีได้หลายไฟล์ ขึ้นกับรูปแบบที่จะใช้ ประกอบด้วย style, weight และ outline
- การกำหนดค่า weight จะกำหนดค่าระหว่าง 100 - 900 เป็นเลขหลักร้อยลงท้าย 00 ค่าของส่วนนี้จะถูก
นำไปใช้ในการกำหนดค่า fontWeight property ของ TextStyle object ตัวอย่างเช่น ถ้าต้องการใช้ฟอนท์
RobotoMono-Bold เราต้องกำหนดค่า FontWeight.w700 ใน TextStyle ซึ่งเป็นการเรียกใช้งานเท่านั้น เรา
ไม่สามารถกำหนดค่าเกินค่าเดิมของฟอนท์นั้นๆ ได้
- การกำหนดค่า style จะกำหนดเป็น italic กรณีมีการใช้งานฟอนท์แบบ italic โดยเวลาเรียกใช้ ก็จะกำหนด
ผ่านค่า fontStyle property ของ TextStyle object ในรูปแบบ FontStyle.italic เราสามารถเรียกใช้งานการ
กำหนดค่า style ตามค่าของไฟล์นั้นๆ เท่านั้น ไม่สามารถเรียกใช้เพื่อเปลี่ยนรูปแบบ style ได้ เช่น ไฟล์
Raleway-Italic จะเรียกใช้งานแบบกำหนดให้เป็น FontStyle.normal ก็จะไม่มีผลใดๆ
การเรียกใช้งานฟอนท์เป็นค่าเริ่มต้นของ App
เมื่อเรากำหนดชื่อที่จะใช้งานแล้ว เราสามารถเลือกที่จะให้ app ของเราใช้เป็นฟอนท์นี้เป็นค่าเริ่มต้น โดย
ที่ไม่ต้องไปกำหนดแต่ละจุดเอง โดยสามารถกำหนดในส่วนของ การใช้งาน theme ดังนี้
MaterialApp( title: 'Custom Fonts', // สมมติกำหนดใช้ Taitham3 เป็นฟอนท์หลักของ app theme: ThemeData(fontFamily: 'Taitham3'), // กำหนดในส่วนของ theme home: const MyHomePage(), );
ตัวอย่างการกำหนดในไฟล์ main.dart
import 'package:flutter/material.dart'; import 'package:flutter_app2/screen/profile.dart'; import './screen/launcher.dart'; void main() { runApp(const MyApp());} // ส่วนของ Stateless widget class MyApp extends StatelessWidget{ const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.blue, fontFamily: 'Taitham3', textTheme: TextTheme(bodyText2: TextStyle(color: Colors.red)), ), title: 'First Flutter App', initialRoute: '/', // สามารถใช้ home แทนได้ routes: { Launcher.routeName: (context) => Launcher(), }, ); } }
ทดสอบเรียกใช้งานในไฟล์ home.dart โดยเราลองคัดลอกภาษาขืนมาวางแทนคำว่า Home Screen
![](https://i.imgur.com/eSwYUSy.jpg)
สังเกตจากภาพว่าในโปรแกรมแก้ไขโค้ด เราจะไม่สามารถเห็นข้อความภาษาขืนที่เอามาวางได้ เพราะไม่
รองรับภาษาดังกล่าว แต่เมื่อดูผลลัพธ์เมื่อรัน app ก็จะเป็นดังนี้
![](https://i.imgur.com/R46Pmfi.jpg)
จะเห็น app ของเรา รองรับภาษาขืนซึ่งเป็นภาษาที่ app ได้ทำการฝังฟอนท์เข้ามาใช้งานด้วย
ในกรณีที่เราต้องการใช้งานฟอนท์เฉพาะบางจุดใน widget เท่านั้น เราไม่จำเป็นต้องกำหนดในส่วน
ของ theme ตามตัวอย่างด้านบน แต่สามารถเรียกใช้งานในลักษณะดังนี้แทนได้
![](https://i.imgur.com/r1zZLfP.jpg)
เรากำหนดเฉพาะสำหรับข้อความที่เป็นภาษาขืน โดยกำหนด fontFamily ให้กับ TextStyle ดังรูปด้านบน
ผลลัพธ์ที่ได้ก็จะเป็นดังนี้
![](https://i.imgur.com/Mxz9IaW.jpg)
ด้วยขั้นตอนและวิธีการง่ายๆ นี้เราสามารถเลือกใช้งานฟอนท์ใน app ของเราตามต้องการได้ อย่างไรก็ตาม
ก็ควรเลือกเท่าที่จำเป็น เพราะหากมีไฟล์ฟอนท์จำนวนมาก ก็จะทำให้ app ของเรามีขนาดไฟล์ใหญ่ขึ้นตามไปด้วย
เลือกปรับประยุกต์ใช้ให้เหมาะสม