Custom Font i mobilutveckling — vad är det, format och tillämpning

Vad är Custom Font?

Custom Font (anpassat typsnitt) — är en fil med ett typsnitt som inte ingår i operativsystemets standardtypsnittsuppsättning. Utvecklare lägger till sådana typsnitt i projektet för unik typografi som matchar varumärket. Anpassade typsnitt kan vara både betalda kommersiella typsnitt och gratis open source-typsnitt, till exempel Inter, Montserrat, Roboto (anpassad version).

Typiska användningsscenarier för anpassade typsnitt: logotyper och rubriker för varumärkesappar, läsappar med särskilda typografikrav, spel med tematiska typsnitt, appar för icke-latinska språk där systemtypsnittet inte stöder nödvändiga glyfer. Enligt Google Fonts anpassar över 60 % av topp 100-apparna typsnitt för visuell differentiering.

Varför behövs anpassade typsnitt

Systemtypsnitten (San Francisco på iOS, Roboto på Android) är optimerade för gränssnitt men inte lämpliga för varumärkestypografi. Ett anpassat typsnitt förstärker varumärkesigenkänningen, kan innehålla speciella symboler (ikon typsnitt) och förbättrar läsbarheten för specifika målgrupper. Överdriven användning av olika typsnitt försämrar dock användarupplevelsen — det rekommenderas med högst 2-3 familjer per app.

Typsnittsformat för mobilappar

Mobilplattformar stöder flera typsnittsformat. TrueType (TTF) — det mest spridda formatet, kompatibelt med alla versioner av iOS och Android. OpenType (OTF) — en utökning av TTF med stöd för ligaturer, alternativa glyfer och OpenType-funktioner. Båda formaten har tilläggen .ttf och .otf och fungerar identiskt på mobilplattformar.

WOFF2 (Web Open Font Format 2) — ett komprimerat format för webben, som stöds i Android från version 10. WOFF2 ger 30-50 % komprimering jämfört med TTF. För iOS stöds WOFF2 via Safari, men i inbyggda appar krävs konvertering till TTF/OTF. Variable Fonts (variabla typsnitt) — ett modernt format som lagrar alla stilar i en fil.

För mobilutveckling rekommenderas att använda OTF som huvudformat — det stöder OpenType-funktioner i samma storlek som TTF. För att spara utrymme i APK, använd woff2-komprimering eller laddning av typsnitt på begäran.

Ansluta anpassade typsnitt i iOS

Processen att ansluta ett anpassat typsnitt i iOS består av två steg: att lägga till filen i projektets bundle och registrera i Info.plist. Typsnittsfilen placeras i projektkatalogen (vanligtvis Resources/Fonts) och inkluderas i target. I Info.plist läggs en array UIAppFonts (Fonts provided by application) till med namnen på typsnittsfilerna, inklusive tillägget.

Efter registrering är typsnittet tillgängligt via UIFont(name:size:) under PostScript-namnet. PostScript-namnet kan hittas via UIFont.familyNames och UIFont.fontNames(forFamilyName:). Om namnet är felaktigt returnerar UIFont(name:size:) nil. För felsökning rekommenderas att visa alla registrerade typsnitt på skärmen vid första start.

Anslutningsexempel

Låt oss titta på hela cykeln för att ansluta typsnittet Montserrat i ett iOS-projekt i Swift. Filen Montserrat-Regular.ttf läggs till i projektet, anges i Info.plist, laddas sedan via UIFont och tillämpas på en UILabel. För varje stil (regular, bold, italic) läggs en separat fil och en separat post i Info.plist till.

// 1. I Info.plist: UIAppFonts → "Montserrat-Regular.ttf"
// 2. Ladda typsnitt i kod
guard let customFont = UIFont(name: "Montserrat-Regular", size: 16) else {
    // fallback till systemtypsnitt
    label.font = UIFont.systemFont(ofSize: 16)
    return
}
label.font = customFont
// 3. Använd i NSAttributedString
let attributes = [NSAttributedString.Key.font: customFont]
let attributed = NSAttributedString(string: "Text", attributes: attributes)

Hantering av situationen när typsnittet inte har laddats (UIFont returnerar nil) är obligatorisk. Använd systemtypsnittet som fallback istället för att appen kraschar. Detta är särskilt viktigt för typsnitt som laddas från nätverket eller läggs till i valfria moduler.

Dynamisk laddning via CTFontManager

För typsnitt som laddas ner på begäran används CTFontManagerRegisterGraphicsFont. Denna metod registrerar ett typsnitt från data i minnet (Data) och gör det tillgängligt för UIFont. Efter användning kan typsnittet avregistreras via CTFontManagerUnregisterGraphicsFont. Dynamisk laddning är användbar för appar med en stor uppsättning typsnitt där inte alla behövs samtidigt.

Ansluta anpassade typsnitt i Android

I Android läggs anpassade typsnitt till via resurssystemet res/font. TTF- eller OTF-filer placeras i res/font/, varefter XML Font Family-resurser skapas för att gruppera stilar. Från Android 8.0 (API 26) är detta den enda rekommenderade metoden. För äldre versioner används assets och Typeface.createFromAsset.

XML Font Family beskriver överensstämmelsen mellan stil (regular, bold, italic) och typsnittsfilen. I XML-markup väljer attributet android:fontFamily="@font/my_font" automatiskt rätt fil vid setTypeface med motsvarande stil. Detta förenklar typografin — det räcker att ange familjen i temat, och Android väljer själv bold vid anropet setTypeface(textView, Typeface.BOLD).

Skapa Font Family

Skapa en XML-fil i res/font/my_font.xml, där alla typsnittsfiler för olika stilar listas. Varje element har attributen fontStyle (normal/italic) och fontWeight (100-900). Efter det, i mark-up, ange android:fontFamily="@font/my_font". Vid användning av textStyle="bold" väljer Android automatiskt filen med 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>

Vid användning av Font Family cachar resursmetoden automatiskt typsnitten och väljer rätt stil. Om den nödvändiga vikten saknas i familjen, syntetiserar Android den från den närmaste tillgängliga. För exakt kontroll över typsnittet, använd Typeface.create() med explicit angivande av filen.

Ansluta i Flutter och React Native

I plattformsoberoende ramverk är anslutningen av typsnitt enhetlig. Flutter använder pubspec.yaml för att specificera typsnitt: filer placeras i mappen fonts/ i projektet, deklareras sedan i avsnittet fonts med angivande av familj och stilar. Därefter appliceras typsnittet via TextStyle(fontFamily: 'Montserrat') eller i appens tema. Flutter stöder TTF och OTF.

React Native använder två tillvägagångssätt: inbyggt (via Info.plist och res/font) eller via biblioteken react-native-vector-icons och @expo-google-fonts. Expo förenklar processen — typsnitt laddas via expo-font: Font.loadAsync({ 'Montserrat': require('./assets/fonts/Montserrat.ttf') }). React Navigation och teman gör det möjligt att ställa in typsnitt globalt.

Exempel i Flutter

Deklaration av typsnitt i pubspec.yaml och tillämpning i MaterialApp-temat. Filerna Montserrat-Regular.ttf och Montserrat-Bold.ttf placeras i fonts/. Efter deklaration är typsnittet tillgängligt via TextStyle i hela appen. Flutter använder automatiskt bold-filen vid fontWeight: FontWeight.bold.

// pubspec.yaml
flutter:
  fonts:
    - family: Montserrat
      fonts:
        - asset: fonts/Montserrat-Regular.ttf
        - asset: fonts/Montserrat-Bold.ttf
          weight: 700
// Användning i tema
MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      headlineLarge: TextStyle(
        fontFamily: 'Montserrat',
        fontWeight: FontWeight.bold,
        fontSize: 28
      )
    )
  )
)

Om Flutter inte hittar typsnittet på den angivna sökvägen använder appen systemets fallback-typsnitt utan fel. För felsökning, aktivera checkConsistency i MaterialApp — den kontrollerar tillgängligheten av typsnitt och visar varningar i konsolen vid frånvaro.

Optimera typsnittsstorlek

Storleken på APK och IPA beror direkt på antalet inkluderade typsnitt. En TTF-fil väger 50-500 KB för latinsk teckenuppsättning och upp till 2-5 MB för typsnitt med stöd för kyrilliska, kinesiska tecken eller andra utökade uppsättningar. Tio typsnitt kan lägga till 10-20 MB till appens storlek, vilket är kritiskt för mobil nedladdning.

För optimering, använd subsetting — borttagning av oanvända tecken från typsnittsfilen. Verktyg som glyphhanger, fonttools (pyftsubset) och Google Webfont Optimizer skapar en version av typsnittet med endast nödvändiga glyfer (latin + kyrilliska + siffror + skiljetecken). Detta minskar storleken med 50-80 %. På iOS kan on-demand-resurser användas för typsnitt som inte behövs vid första start.

Variabla typsnitt

Variable Font (variabelt typsnitt) — en fil som innehåller alla stilar: från Thin till Black och från Condensed till Expanded. Ett variabelt typsnitt kan ersätta 10-20 separata filer med olika vikter. Storleken på en sådan fil är ungefär lika med 1-2 statiska filer. Stöd: iOS 11+, Android 10+, Flutter (via FontVariation), React Native (via anpassade bibliotek).

Komprimering och laddning på begäran

Använd WOFF2 för att minska typsnittsstorleken med 30-50 %. På Android med API 29 kan WOFF2 användas direkt. För iOS krävs konvertering av WOFF2 till TTF före registrering. Typsnitt som endast används i onboarding eller på vissa skärmar, ladda via on-demand-resurser (iOS) eller Dynamic Feature (Android) — de kommer inte att ingå i det grundläggande APK.

Prestanda och bästa praxis

Anpassade typsnitt påverkar prestandan på två sätt: laddningstid och minne. Vid första referensen till typsnittet läser systemet filen från disken, tolkar typsnittstabellerna och skapar interna strukturer för rendering. För ett typsnitt på 1 MB tar detta 20-50 ms. Cachelagring efter första laddningen eliminerar fördröjningen vid upprepade referenser.

Minne: varje laddat typsnitt lagras i processens cache. Systemtypsnitt är förladdade, anpassade typsnitt laddas vid första användningen. I minnet tar typsnittet ungefär 2-3 gånger mer plats än på disken på grund av de tolkade strukturerna: tabellerna cmap, glyf, head, hmtx. För 5 anpassade typsnitt av medelstorlek (total volym 3 MB) krävs cirka 6-9 MB RAM.

Rekommendationer

Begränsa antalet anpassade typsnitt till 2-3 familjer per app. Använd variabla typsnitt för att ersätta flera stilar. Tillämpa systemtypsnitt för UI-element (knappar, etiketter, listor) och endast anpassade typsnitt för accenttypografi (rubriker, banners). Cachelagra Typeface på Android via en Map, och UIFont på iOS via statiska variabler.

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

Laddning av Typeface i onBindViewHolder är endast tillåten med cache. Utan cache skapar varje anrop av createFromAsset ett nytt objekt och läser filen från disken. Vid rullning av RecyclerView orsakar detta märkbara fördröjningar. Cachen löser problemet eftersom typsnittet laddas en gång och återanvänds.