Custom Font ในการพัฒนาแอปมือถือ — คืออะไร รูปแบบและการใช้งาน

Custom Font คืออะไร?

Custom Font (ฟอนต์ที่กำหนดเอง) คือไฟล์ฟอนต์ที่ไม่ได้เป็นส่วนหนึ่งของชุดฟอนต์เริ่มต้นของระบบปฏิบัติการ นักพัฒนาเพิ่มฟอนต์เหล่านี้ลงในโปรเจกต์ของตนเพื่อให้มีรูปแบบตัวอักษรที่ไม่ซ้ำใครและสอดคล้องกับแบรนด์ ฟอนต์ที่กำหนดเองอาจเป็นฟอนต์เชิงพาณิชย์แบบชำระเงินหรือฟอนต์โอเพนซอร์สฟรี เช่น Inter, Montserrat หรือเวอร์ชันที่กำหนดเองของ Roboto

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

เหตุใดจึงต้องใช้ฟอนต์ที่กำหนดเอง

ฟอนต์ระบบ (San Francisco บน iOS, Roboto บน Android) ได้รับการปรับให้เหมาะสมสำหรับอินเทอร์เฟซ แต่ไม่เหมาะสำหรับการพิมพ์ของแบรนด์ ฟอนต์ที่กำหนดเอง ช่วยเสริมการจดจำแบรนด์ สามารถรวมอักขระพิเศษ (ฟอนต์ไอคอน) และปรับปรุงการอ่านได้สำหรับกลุ่มผู้ใช้เฉพาะ อย่างไรก็ตาม การใช้ฟอนต์ต่างๆ มากเกินไปทำให้ประสบการณ์ผู้ใช้แย่ลง — แนะนำให้ใช้ไม่เกิน 2–3 ตระกูลต่อแอปพลิเคชัน

รูปแบบฟอนต์สำหรับแอปพลิเคชันมือถือ

แพลตฟอร์มมือถือรองรับรูปแบบฟอนต์หลายรูปแบบ TrueType (TTF) เป็นรูปแบบที่พบบ่อยที่สุด รองรับทุกรุ่นของ iOS และ Android OpenType (OTF) เป็นส่วนขยายของ TTF ที่รองรับการเชื่อมอักษร กลิฟทางเลือก และคุณสมบัติ OpenType ทั้งสองรูปแบบมีนามสกุล .ttf และ .otf และทำงานเหมือนกันบนแพลตฟอร์มมือถือ

WOFF2 (Web Open Font Format 2) เป็นรูปแบบที่บีบอัดสำหรับเว็บ รองรับบน Android ตั้งแต่เวอร์ชัน 10 WOFF2 ให้การบีบอัด 30–50% เมื่อเทียบกับ TTF สำหรับ iOS WOFF2 รองรับผ่าน Safari แต่แอปพลิเคชันดั้งเดิมต้องแปลงเป็น TTF/OTF ฟอนต์แปรผัน (Variable Fonts) เป็นรูปแบบที่ทันสมัยซึ่งเก็บน้ำหนักทั้งหมดในไฟล์เดียว

สำหรับการพัฒนาแอปมือถือ แนะนำให้ใช้ OTF เป็นรูปแบบหลัก — รองรับคุณสมบัติ OpenType ในขนาดเดียวกับ TTF เพื่อประหยัดพื้นที่ APK ให้ใช้การบีบอัดผ่าน woff2 หรือการโหลดฟอนต์ตามความต้องการ

การรวมฟอนต์ที่กำหนดเองใน iOS

กระบวนการรวมฟอนต์ที่กำหนดเองใน iOS ประกอบด้วยสองขั้นตอน: เพิ่มไฟล์ไปยังบันเดิลโปรเจกต์และลงทะเบียนใน Info.plist ไฟล์ฟอนต์จะถูกวางในไดเรกทอรีโปรเจกต์ (โดยปกติคือ Resources/Fonts) และรวมอยู่ใน target ใน Info.plist จะมีการเพิ่มอาร์เรย์ UIAppFonts (Fonts provided by application) พร้อมชื่อไฟล์ฟอนต์รวมถึงนามสกุล

หลังจากการลงทะเบียน ฟอนต์จะสามารถเข้าถึงได้ผ่าน UIFont(name:size:) โดยใช้ชื่อ PostScript ชื่อ PostScript สามารถหาได้ผ่าน UIFont.familyNames และ UIFont.fontNames(forFamilyName:) หากชื่อไม่ถูกต้อง UIFont(name:size:) จะคืนค่า nil สำหรับการดีบัก แนะนำให้แสดงฟอนต์ที่ลงทะเบียนทั้งหมดบนหน้าจอเมื่อเริ่มต้นครั้งแรก

ตัวอย่างการรวม

มาดูขั้นตอนการรวมฟอนต์ Montserrat ในโปรเจกต์ iOS ด้วย Swift กัน ไฟล์ Montserrat-Regular.ttf จะถูกเพิ่มในโปรเจกต์ ประกาศใน Info.plist จากนั้นโหลดผ่าน UIFont และนำไปใช้กับ UILabel แต่ละน้ำหนัก (regular, bold, italic) ต้องใช้ไฟล์แยกและรายการแยกใน Info.plist

// 1. ใน Info.plist: UIAppFonts → "Montserrat-Regular.ttf"
// 2. โหลดฟอนต์ในโค้ด
guard let customFont = UIFont(name: "Montserrat-Regular", size: 16) else {
    // กลับไปใช้ฟอนต์ระบบ
    label.font = UIFont.systemFont(ofSize: 16)
    return
}
label.font = customFont
// 3. ใช้ใน NSAttributedString
let attributes = [NSAttributedString.Key.font: customFont]
let attributed = NSAttributedString(string: "Text", attributes: attributes)

การจัดการกรณีที่ฟอนต์ไม่โหลด (UIFont คืนค่า nil) เป็นสิ่งจำเป็น แทนที่จะทำให้แอปพลิเคชันหยุดทำงาน ให้ใช้ฟอนต์ระบบเป็น ฟอนต์สำรอง ซึ่งสำคัญโดยเฉพาะสำหรับฟอนต์ที่โหลดจากเครือข่ายหรือเพิ่มในโมดูลเสริม

การโหลดแบบไดนามิกผ่าน CTFontManager

สำหรับฟอนต์ที่ดาวน์โหลดตามความต้องการ จะใช้ CTFontManagerRegisterGraphicsFont เมธอดนี้ลงทะเบียนฟอนต์จากข้อมูลในหน่วยความจำ (Data) และทำให้พร้อมใช้งานสำหรับ UIFont หลังจากใช้งาน ฟอนต์สามารถยกเลิกการลงทะเบียนผ่าน CTFontManagerUnregisterGraphicsFont การโหลดแบบไดนามิกมีประโยชน์สำหรับแอปพลิเคชันที่มีชุดฟอนต์ขนาดใหญ่ซึ่งไม่จำเป็นต้องใช้ทั้งหมดทันที

การรวมฟอนต์ที่กำหนดเองใน Android

บน Android ฟอนต์ที่กำหนดเองจะถูกเพิ่มผ่านระบบทรัพยากร res/font ไฟล์ TTF หรือ OTF จะถูกวางใน res/font/ จากนั้นสร้างทรัพยากร XML Font Family เพื่อจัดกลุ่มน้ำหนัก เริ่มตั้งแต่ Android 8.0 (API 26) นี่เป็นวิธีเดียวที่แนะนำ สำหรับเวอร์ชันเก่า จะใช้ assets และ Typeface.createFromAsset

XML Font Family อธิบายการจับคู่ระหว่างน้ำหนัก (regular, bold, italic) และไฟล์ฟอนต์ ในเลย์เอาต์ XML แอตทริบิวต์ android:fontFamily="@font/my_font" จะเลือกไฟล์ที่ถูกต้องโดยอัตโนมัติเมื่อเรียก setTypeface ด้วยสไตล์ที่สอดคล้องกัน ซึ่งทำให้การพิมพ์ง่ายขึ้น — เพียงระบุตระกูลในธีม และ Android จะเลือกรุ่นตัวหนาโดยอัตโนมัติเมื่อเรียก setTypeface(textView, Typeface.BOLD)

การสร้าง Font Family

สร้างไฟล์ XML ที่ res/font/my_font.xml ซึ่งแสดงรายการไฟล์ฟอนต์ทั้งหมดสำหรับน้ำหนักต่างๆ แต่ละองค์ประกอบมีแอตทริบิวต์ fontStyle (normal/italic) และ fontWeight (100–900) จากนั้นในเลย์เอาต์ ให้ระบุ android:fontFamily="@font/my_font" เมื่อใช้ textStyle="bold" Android จะเลือกไฟล์ที่มี fontWeight 700 โดยอัตโนมัติ

<!-- res/font/my_font.xml -->
<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font
        android:fontStyle="normal"
        android:fontWeight="400"
        app:font="@font/my_font_regular" />
    <font
        android:fontStyle="normal"
        android:fontWeight="700"
        app:font="@font/my_font_bold" />
</font-family>

เมื่อใช้ Font Family แนวทางทรัพยากร จะแคชฟอนต์โดยอัตโนมัติและเลือกน้ำหนักที่ถูกต้อง หากน้ำหนักที่ต้องการไม่มีในตระกูล Android จะสังเคราะห์จากน้ำหนักที่ใกล้เคียงที่สุดที่มีอยู่ สำหรับการควบคุมฟอนต์อย่างแม่นยำ ให้ใช้ Typeface.create() พร้อมการอ้างอิงไฟล์ที่ชัดเจน

การรวมใน Flutter และ React Native

ในเฟรมเวิร์กข้ามแพลตฟอร์ม การรวมฟอนต์เป็นแบบรวมศูนย์ Flutter ใช้ pubspec.yaml เพื่อประกาศฟอนต์: ไฟล์จะถูกวางในโฟลเดอร์ fonts/ ของโปรเจกต์ จากนั้นแสดงรายการในส่วน fonts พร้อมตระกูลและน้ำหนัก ฟอนต์จะถูกนำไปใช้ผ่าน TextStyle(fontFamily: 'Montserrat') หรือในธีมแอป Flutter รองรับ TTF และ OTF

React Native ใช้สองแนวทาง: ดั้งเดิม (ผ่าน Info.plist และ res/font) หรือผ่านไลบรารีเช่น react-native-vector-icons และ @expo-google-fonts Expo ทำให้กระบวนการง่ายขึ้น — ฟอนต์จะถูกโหลดผ่าน expo-font: Font.loadAsync({ 'Montserrat': require('./assets/fonts/Montserrat.ttf') }) React Navigation และธีมอนุญาตให้ตั้งค่าฟอนต์ทั่วโลก

ตัวอย่างใน Flutter

การประกาศฟอนต์ใน pubspec.yaml และการนำไปใช้ในธีม MaterialApp ไฟล์ Montserrat-Regular.ttf และ Montserrat-Bold.ttf จะถูกวางใน fonts/ หลังจากการประกาศ ฟอนต์จะสามารถเข้าถึงได้ผ่าน TextStyle ทั่วทั้งแอปพลิเคชัน Flutter จะใช้ไฟล์ตัวหนาโดยอัตโนมัติเมื่อระบุ fontWeight: FontWeight.bold

// pubspec.yaml
flutter:
  fonts:
    - family: Montserrat
      fonts:
        - asset: fonts/Montserrat-Regular.ttf
        - asset: fonts/Montserrat-Bold.ttf
          weight: 700
// การใช้งานในธีม
MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      headlineLarge: TextStyle(
        fontFamily: 'Montserrat',
        fontWeight: FontWeight.bold,
        fontSize: 28
      )
    )
  )
)

หาก Flutter ไม่พบฟอนต์ตามพาธที่ระบุ แอปพลิเคชันจะใช้ ฟอนต์สำรองของระบบ โดยไม่มีข้อผิดพลาด สำหรับการดีบัก ให้เปิดใช้งาน checkConsistency ใน MaterialApp — มันจะตรวจสอบความพร้อมใช้งานของฟอนต์และพิมพ์คำเตือนในคอนโซลเมื่อไม่มีฟอนต์

การปรับขนาดฟอนต์ให้เหมาะสม

ขนาด APK และ IPA ขึ้นอยู่กับจำนวนฟอนต์ที่รวมโดยตรง ไฟล์ TTF เดียวมีน้ำหนัก 50–500 KB สำหรับชุดอักขระละตินและสูงถึง 2–5 MB สำหรับฟอนต์ที่รองรับซีริลลิก อักขระ CJK หรือชุดขยายอื่นๆ ฟอนต์สิบตัวสามารถเพิ่ม 10–20 MB ให้กับขนาดแอปพลิเคชัน ซึ่งเป็นสิ่งสำคัญสำหรับการดาวน์โหลดบนมือถือ

สำหรับการปรับให้เหมาะสม ให้ใช้ subsetting — การลบอักขระที่ไม่ได้ใช้ออกจากไฟล์ฟอนต์ เครื่องมือเช่น glyphhanger, fonttools (pyftsubset) และ Google Webfont Optimizer จะสร้างเวอร์ชันฟอนต์ที่มีเฉพาะกลิฟที่จำเป็น (ละติน + ซีริลลิก + ตัวเลข + เครื่องหมายวรรคตอน) ซึ่งจะลดขนาดลง 50–80% บน iOS สามารถใช้ทรัพยากรตามความต้องการสำหรับฟอนต์ที่ไม่จำเป็นเมื่อเริ่มต้นครั้งแรก

ฟอนต์แปรผัน

ฟอนต์แปรผัน (Variable Font) คือไฟล์เดียวที่ประกอบด้วยน้ำหนักทั้งหมดตั้งแต่ Thin ถึง Black และ Condensed ถึง Expanded ฟอนต์แปรผันหนึ่งตัวสามารถแทนที่ไฟล์แยก 10–20 ไฟล์ที่มีน้ำหนักต่างกัน ขนาดของไฟล์ดังกล่าวประมาณเท่ากับไฟล์คงที่ 1–2 ไฟล์ การรองรับ: iOS 11+, Android 10+, Flutter (ผ่าน FontVariation), React Native (ผ่านไลบรารีที่กำหนดเอง)

การบีบอัดและการโหลดตามความต้องการ

ใช้ WOFF2 เพื่อลดขนาดฟอนต์ลง 30–50% บน Android ที่มี API 29 สามารถใช้ WOFF2 ได้โดยตรง สำหรับ iOS จำเป็นต้องแปลง WOFF2 เป็น TTF ก่อนลงทะเบียน ฟอนต์ที่ใช้เฉพาะระหว่างการแนะนำหรือบนหน้าจอที่กำหนดควรโหลดผ่านทรัพยากรตามความต้องการ (iOS) หรือ Dynamic Feature (Android) — ฟอนต์เหล่านี้จะไม่รวมอยู่ใน APK หลัก

ประสิทธิภาพและแนวทางปฏิบัติที่ดีที่สุด

ฟอนต์ที่กำหนดเองส่งผลต่อประสิทธิภาพในสองทาง: เวลาโหลดและหน่วยความจำ เมื่อเข้าถึงครั้งแรก ระบบจะอ่านไฟล์จากดิสก์ แยกวิเคราะห์ตารางฟอนต์ และสร้างโครงสร้างภายในสำหรับการเรนเดอร์ สำหรับฟอนต์ขนาด 1 MB จะใช้เวลา 20–50 ms การแคชหลังจากการโหลดครั้งแรกจะช่วยลดความล่าช้าในการเข้าถึงครั้งต่อไป

หน่วยความจำ: ฟอนต์ที่โหลดแต่ละตัวจะถูกเก็บในแคชของกระบวนการ ฟอนต์ระบบถูกโหลดไว้ล่วงหน้า ฟอนต์ที่กำหนดเองจะถูกโหลดเมื่อใช้ครั้งแรก ในหน่วยความจำ ฟอนต์ใช้พื้นที่ประมาณ 2–3 เท่าของบนดิสก์เนื่องจากโครงสร้างที่ถูกแยกวิเคราะห์: ตาราง cmap, glyf, head, hmtx สำหรับฟอนต์ที่กำหนดเอง 5 ตัวขนาดปานกลาง (รวม 3 MB) จะต้องใช้ RAM ประมาณ 6–9 MB

คำแนะนำ

จำกัดฟอนต์ที่กำหนดเองไว้ที่ 2–3 ตระกูลต่อแอปพลิเคชัน ใช้ฟอนต์แปรผันเพื่อแทนที่น้ำหนักหลายๆ ระดับ ใช้ฟอนต์ระบบสำหรับองค์ประกอบ UI (ปุ่ม, ป้ายกำกับ, รายการ) และฟอนต์ที่กำหนดเองเฉพาะสำหรับการพิมพ์เน้นย้ำ (หัวข้อ, แบนเนอร์) แคช Typeface บน Android ผ่าน Map และ UIFont บน iOS ผ่านตัวแปรสแตติก

object FontCache {
    private val cache = mutableMapOf<String, Typeface>()
    fun get(context: Context, fontId: Int): Typeface {
        return cache.getOrPut(fontId.toString()) {
            ResourcesCompat.getFont(context, fontId)
        }
    }
}
// การใช้งานใน RecyclerView
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    holder.textView.typeface = FontCache.get(context, R.font.montserrat_regular)
}

การโหลด Typeface ใน onBindViewHolder สามารถยอมรับได้เฉพาะเมื่อมีการแคช หากไม่มีแคช ทุกครั้งที่เรียก createFromAsset จะสร้างอ็อบเจกต์ใหม่และอ่านไฟล์จากดิสก์ ในระหว่างการเลื่อน RecyclerView จะทำให้เกิดความหน่วงที่สังเกตได้ แคชแก้ปัญหาได้เพราะฟอนต์ถูกโหลดครั้งเดียวและนำกลับมาใช้ใหม่