Custom Font v mobilním vývoji — co to je, formáty a použití

Co je Custom Font?

Custom Font (vlastní písmo) — je soubor s řezem, který není součástí standardní sady písem operačního systému. Vývojáři přidávají taková písma do projektu pro jedinečnou typografii odpovídající značce. Vlastní písma mohou být jak placená komerční písma, tak bezplatná open-source písma, například Inter, Montserrat, Roboto (vlastní verze).

Typické scénáře použití vlastních písem: loga a nadpisy značkových aplikací, čtečky se speciálními typografickými požadavky, hry s tematickými písmy, aplikace pro nelatinské jazyky, kde systémové písmo nepodporuje potřebné glyfy. Podle údajů Google Fonts přizpůsobuje písma pro vizuální diferenciaci více než 60 % aplikací v top 100.

Proč jsou vlastní písma potřeba

Systémová písma (San Francisco na iOS, Roboto na Android) jsou optimalizována pro rozhraní, ale nehodí se pro typografii značky. Vlastní písmo posiluje rozpoznatelnost značky, může obsahovat speciální symboly (ikonová písma) a zlepšuje čitelnost pro specifické publikum. Nadměrné používání různých písem však zhoršuje UX — doporučuje se nejvýše 2-3 rodiny na aplikaci.

Formáty písem pro mobilní aplikace

Mobilní platformy podporují několik formátů písem. TrueType (TTF) — nejrozšířenější formát, kompatibilní se všemi verzemi iOS a Android. OpenType (OTF) — rozšíření TTF s podporou ligatur, alternativních glyfů a funkcí OpenType. Oba formáty mají přípony .ttf a .otf a fungují na mobilních platformách identicky.

WOFF2 (Web Open Font Format 2) — komprimovaný formát pro web, podporovaný v Android od verze 10. WOFF2 poskytuje kompresi 30-50 % oproti TTF. Pro iOS je WOFF2 podporován přes Safari, ale v nativních aplikacích je vyžadována konverze do TTF/OTF. Variable Fonts (variabilní písma) — moderní formát ukládající všechny řezy v jednom souboru.

Pro mobilní vývoj se doporučuje používat OTF jako hlavní formát — podporuje funkce OpenType při stejné velikosti jako TTF. Pro úsporu místa v APK použijte kompresi přes woff2 nebo načítání písem na vyžádání.

Připojení vlastních písem v iOS

Proces připojení vlastního písma v iOS se skládá ze dvou kroků: přidání souboru do bundle projektu a registrace v Info.plist. Soubor písma se umístí do adresáře projektu (obvykle Resources/Fonts) a zahrne se do targetu. Do Info.plist se přidá pole UIAppFonts (Fonts provided by application) s názvy souborů písem včetně přípony.

Po registraci je písmo dostupné přes UIFont(name:size:) pod jménem PostScript. Jméno PostScript lze zjistit přes UIFont.familyNames a UIFont.fontNames(forFamilyName:). Pokud je jméno nesprávné, UIFont(name:size:) vrací nil. Pro ladění se doporučuje zobrazit všechna registrovaná písma na obrazovce při prvním spuštění.

Příklad připojení

Podívejme se na úplný cyklus připojení písma Montserrat v iOS projektu ve Swift. Soubor Montserrat-Regular.ttf se přidá do projektu, uvede se v Info.plist, poté se načte přes UIFont a aplikuje se na UILabel. Pro každý řez (regular, bold, italic) se přidá samostatný soubor a samostatný záznam v Info.plist.

// 1. V Info.plist: UIAppFonts → "Montserrat-Regular.ttf"
// 2. Načtení písma v kódu
guard let customFont = UIFont(name: "Montserrat-Regular", size: 16) else {
    // záložní systémové písmo
    label.font = UIFont.systemFont(ofSize: 16)
    return
}
label.font = customFont
// 3. Použití v NSAttributedString
let attributes = [NSAttributedString.Key.font: customFont]
let attributed = NSAttributedString(string: "Text", attributes: attributes)

Zpracování situace, kdy písmo není načteno (UIFont vrací nil), je povinné. Místo pádu aplikace použijte systémové písmo jako fallback. To je důležité zejména pro písma načítaná ze sítě nebo přidávaná do volitelných modulů.

Dynamické načítání přes CTFontManager

Pro písma stahovaná na vyžádání se používá CTFontManagerRegisterGraphicsFont. Tato metoda registruje písmo z dat v paměti (Data) a zpřístupňuje jej pro UIFont. Po použití lze písmo odregistrovat přes CTFontManagerUnregisterGraphicsFont. Dynamické načítání je užitečné pro aplikace s velkou sadou písem, kde nejsou všechna potřeba najednou.

Připojení vlastních písem v Android

V Android se vlastní písma přidávají přes systém prostředků res/font. Soubory TTF nebo OTF se umístí do res/font/, poté se vytvoří XML prostředky Font Family pro seskupení řezů. Od Android 8.0 (API 26) je to jediný doporučený způsob. Pro starší verze se používají assets a Typeface.createFromAsset.

XML Font Family popisuje shodu mezi řezem (regular, bold, italic) a souborem písma. V XML značce atribut android:fontFamily="@font/my_font" automaticky vybírá odpovídající soubor při setTypeface s příslušným stylem. To zjednodušuje typografii — stačí uvést rodinu v tématu a Android sám vybere bold při volání setTypeface(textView, Typeface.BOLD).

Vytvoření Font Family

Vytvořte XML soubor v res/font/my_font.xml, kde jsou uvedeny všechny soubory písma pro různé řezy. Každý prvek má atributy fontStyle (normal/italic) a fontWeight (100-900). Poté v značce uveďte android:fontFamily="@font/my_font". Při použití textStyle="bold" Android automaticky vybere soubor s 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>

Při použití Font Family způsob prostředků automaticky ukládá písma do mezipaměti a vybírá správný řez. Pokud požadovaná váha v rodině chybí, Android ji syntetizuje z nejbližší dostupné. Pro přesnou kontrolu nad písmem použijte Typeface.create() s explicitním uvedením souboru.

Připojení ve Flutter a React Native

V multiplatformních frameworkch je připojení písem sjednoceno. Flutter používá pubspec.yaml pro specifikaci písem: soubory se umístí do složky fonts/ projektu, poté se deklarují v sekci fonts s uvedením rodiny a řezů. Poté se písmo aplikuje přes TextStyle(fontFamily: 'Montserrat') nebo v tématu aplikace. Flutter podporuje TTF a OTF.

React Native používá dva přístupy: nativní (přes Info.plist a res/font) nebo přes knihovny react-native-vector-icons a @expo-google-fonts. Expo proces zjednodušuje — písma se načítají přes expo-font: Font.loadAsync({ 'Montserrat': require('./assets/fonts/Montserrat.ttf') }). React Navigation a témata umožňují globální nastavení písma.

Příklad ve Flutter

Deklarace písem v pubspec.yaml a aplikace v tématu MaterialApp. Soubory Montserrat-Regular.ttf a Montserrat-Bold.ttf se umístí do fonts/. Po deklaraci je písmo dostupné přes TextStyle v celé aplikaci. Flutter automaticky používá bold soubor při fontWeight: FontWeight.bold.

// pubspec.yaml
flutter:
  fonts:
    - family: Montserrat
      fonts:
        - asset: fonts/Montserrat-Regular.ttf
        - asset: fonts/Montserrat-Bold.ttf
          weight: 700
// Použití v tématu
MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      headlineLarge: TextStyle(
        fontFamily: 'Montserrat',
        fontWeight: FontWeight.bold,
        fontSize: 28
      )
    )
  )
)

Pokud Flutter nenajde písmo na uvedené cestě, aplikace použije systémové záložní písmo bez chyb. Pro ladění zapněte checkConsistency v MaterialApp — kontroluje dostupnost písem a zobrazuje varování v konzoli při absenci.

Optimalizace velikosti písem

Velikost APK a IPA přímo závisí na počtu zahrnutých písem. Jeden soubor TTF váží 50-500 KB pro latinskou sadu znaků a až 2-5 MB pro písma s podporou cyrilice, čínských znaků nebo jiných rozšířených sad. Deset písem může přidat 10-20 MB k velikosti aplikace, což je kritické pro mobilní stahování.

Pro optimalizaci použijte subsetting — odstranění nepoužívaných znaků ze souboru písma. Nástroje jako glyphhanger, fonttools (pyftsubset) a Google Webfont Optimizer vytvoří verzi písma pouze s potřebnými glyfy (latinka + cyrilice + číslice + interpunkční znaménka). To zmenší velikost o 50-80 %. Na iOS lze použít on-demand prostředky pro písma, která nejsou potřeba při prvním spuštění.

Variabilní písma

Variable Font (variabilní písmo) — jeden soubor obsahující všechny řezy: od Thin po Black a od Condensed po Expanded. Jedno variabilní písmo může nahradit 10-20 samostatných souborů s různými váhami. Velikost takového souboru je přibližně rovna 1-2 statickým souborům. Podpora: iOS 11+, Android 10+, Flutter (přes FontVariation), React Native (přes vlastní knihovny).

Komprese a načítání na vyžádání

Použijte WOFF2 pro zmenšení velikosti písem o 30-50 %. Na Android s API 29 lze WOFF2 použít přímo. Pro iOS je třeba před registrací převést WOFF2 do TTF. Písma používaná pouze v onboardingu nebo na určitých obrazovkách načítejte přes on-demand prostředky (iOS) nebo Dynamic Feature (Android) — nebudou součástí základního APK.

Výkon a osvědčené postupy

Vlastní písma ovlivňují výkon dvěma způsoby: dobou načítání a pamětí. Při prvním odkazu na písmo systém přečte soubor z disku, parsuje tabulky písma a vytvoří interní struktury pro vykreslování. Pro písmo o velikosti 1 MB to trvá 20-50 ms. Ukládání do mezipaměti po prvním načtení odstraňuje zpoždění při opakovaných odkazech.

Paměť: každé načtené písmo je uloženo v mezipaměti procesu. Systémová písma jsou přednačtena, vlastní se načítají při prvním použití. V paměti zabírá písmo přibližně 2-3krát více místa než na disku kvůli rozloženým strukturám: tabulkám cmap, glyf, head, hmtx. Pro 5 vlastních písem střední velikosti (celkový objem 3 MB) je potřeba asi 6-9 MB RAM.

Doporučení

Omezte počet vlastních písem na 2-3 rodiny na aplikaci. Používejte variabilní písma pro nahrazení několika řezů. Aplikujte systémová písma pro prvky UI (tlačítka, popisky, seznamy) a vlastní pouze pro akcentní typografii (nadpisy, bannery). Ukládejte do mezipaměti Typeface na Android přes Map a UIFont na iOS přes statické proměnné.

object FontCache {
    private val cache = mutableMapOf<String, Typeface>()
    fun get(context: Context, fontId: Int): Typeface {
        return cache.getOrPut(fontId.toString()) {
            ResourcesCompat.getFont(context, fontId)
        }
    }
}
// Použití v RecyclerView
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    holder.textView.typeface = FontCache.get(context, R.font.montserrat_regular)
}

Načítání Typeface v onBindViewHolder je povoleno pouze při existenci mezipaměti. Bez mezipaměti každé volání createFromAsset vytváří nový objekt a čte soubor z disku. Při rolování RecyclerView to způsobuje znatelné prodlevy. Mezipaměť problém řeší, protože písmo se načte jednou a znovu používá.