Custom Font en el desarrollo móvil — qué es, formatos y uso

¿Qué es una Custom Font?

Custom Font (fuente personalizada) es un archivo tipográfico que no forma parte del conjunto de fuentes predeterminado del sistema operativo. Los desarrolladores añaden estas fuentes a sus proyectos para una tipografía única y coherente con la marca. Las fuentes personalizadas pueden ser tanto tipografías comerciales de pago como fuentes gratuitas de código abierto, por ejemplo, Inter, Montserrat o una versión personalizada de Roboto.

Los casos de uso típicos de las fuentes personalizadas incluyen: logotipos y titulares de aplicaciones de marca, aplicaciones de lectura con requisitos tipográficos específicos, juegos con fuentes temáticas y aplicaciones para idiomas no latinos donde la fuente del sistema no admite los glifos necesarios. Según Google Fonts, más del 60% de las aplicaciones del top 100 personalizan sus fuentes para diferenciarse visualmente.

Por qué se necesitan fuentes personalizadas

Las fuentes del sistema (San Francisco en iOS, Roboto en Android) están optimizadas para interfaces, pero no son adecuadas para la tipografía de marca. Una fuente personalizada refuerza el reconocimiento de la marca, puede incluir caracteres especiales (fuentes de iconos) y mejora la legibilidad para audiencias específicas. Sin embargo, el uso excesivo de diferentes fuentes degrada la experiencia de usuario; se recomienda no usar más de 2–3 familias por aplicación.

Formatos de fuentes para aplicaciones móviles

Las plataformas móviles admiten varios formatos de fuentes. TrueType (TTF) es el formato más común, compatible con todas las versiones de iOS y Android. OpenType (OTF) es una extensión de TTF con soporte para ligaduras, glifos alternativos y funciones OpenType. Ambos formatos tienen extensiones .ttf y .otf y funcionan de manera idéntica en las plataformas móviles.

WOFF2 (Web Open Font Format 2) es un formato comprimido para la web, compatible con Android desde la versión 10. WOFF2 proporciona una compresión del 30–50% en comparación con TTF. Para iOS, WOFF2 es compatible a través de Safari, pero las aplicaciones nativas requieren conversión a TTF/OTF. Las fuentes variables (Variable Fonts) son un formato moderno que almacena todos los pesos en un solo archivo.

Para el desarrollo móvil, se recomienda usar OTF como formato principal: admite funciones OpenType con el mismo tamaño que TTF. Para ahorrar espacio en el APK, use compresión mediante woff2 o carga de fuentes bajo demanda.

Integración de fuentes personalizadas en iOS

El proceso de integración de una fuente personalizada en iOS consta de dos pasos: agregar el archivo al bundle del proyecto y registrarlo en Info.plist. El archivo de fuente se coloca en el directorio del proyecto (normalmente Resources/Fonts) y se incluye en el target. En Info.plist se añade un array UIAppFonts (Fonts provided by application) con los nombres de los archivos de fuente, incluida la extensión.

Después del registro, la fuente es accesible mediante UIFont(name:size:) usando su nombre PostScript. El nombre PostScript se puede obtener a través de UIFont.familyNames y UIFont.fontNames(forFamilyName:). Si el nombre es incorrecto, UIFont(name:size:) devuelve nil. Para depurar, se recomienda mostrar todas las fuentes registradas en pantalla al primer inicio.

Ejemplo de integración

Veamos el ciclo completo de integración de la fuente Montserrat en un proyecto iOS en Swift. El archivo Montserrat-Regular.ttf se añade al proyecto, se declara en Info.plist, luego se carga mediante UIFont y se aplica a un UILabel. Cada peso (regular, bold, italic) requiere un archivo separado y una entrada separada en Info.plist.

// 1. En Info.plist: UIAppFonts → "Montserrat-Regular.ttf"
// 2. Cargar fuente en el código
guard let customFont = UIFont(name: "Montserrat-Regular", size: 16) else {
    // recurrir a la fuente del sistema
    label.font = UIFont.systemFont(ofSize: 16)
    return
}
label.font = customFont
// 3. Usar en NSAttributedString
let attributes = [NSAttributedString.Key.font: customFont]
let attributed = NSAttributedString(string: "Text", attributes: attributes)

Gestionar el caso en que la fuente no se carga (UIFont devuelve nil) es obligatorio. En lugar de que la aplicación se bloquee, use la fuente del sistema como fallback. Esto es especialmente importante para fuentes cargadas desde la red o añadidas a módulos opcionales.

Carga dinámica mediante CTFontManager

Para fuentes descargadas bajo demanda, se usa CTFontManagerRegisterGraphicsFont. Este método registra una fuente desde datos en memoria (Data) y la hace disponible para UIFont. Después de su uso, la fuente se puede anular el registro mediante CTFontManagerUnregisterGraphicsFont. La carga dinámica es útil para aplicaciones con un gran conjunto de fuentes donde no todas son necesarias de inmediato.

Integración de fuentes personalizadas en Android

En Android, las fuentes personalizadas se añaden a través del sistema de recursos res/font. Los archivos TTF o OTF se colocan en res/font/, después de lo cual se crean recursos XML Font Family para agrupar los pesos. A partir de Android 8.0 (API 26), esta es la única forma recomendada. Para versiones anteriores, se usan assets y Typeface.createFromAsset.

Un XML Font Family describe la correspondencia entre un peso (regular, bold, italic) y un archivo de fuente. En el diseño XML, el atributo android:fontFamily="@font/my_font" selecciona automáticamente el archivo correcto al llamar a setTypeface con el estilo correspondiente. Esto simplifica la tipografía: basta con especificar la familia en el tema y Android elegirá la versión bold al llamar a setTypeface(textView, Typeface.BOLD).

Creación de una Font Family

Cree un archivo XML en res/font/my_font.xml que enumere todos los archivos de fuente para diferentes pesos. Cada elemento tiene atributos fontStyle (normal/italic) y fontWeight (100–900). Luego, en el diseño, especifique android:fontFamily="@font/my_font". Cuando se usa textStyle="bold", Android selecciona automáticamente el archivo con 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>

Al usar Font Family, el enfoque de recursos almacena en caché las fuentes automáticamente y selecciona el peso correcto. Si el peso requerido no está disponible en la familia, Android lo sintetiza a partir del más cercano disponible. Para un control preciso sobre la fuente, use Typeface.create() con una referencia explícita al archivo.

Integración en Flutter y React Native

En los frameworks multiplataforma, la integración de fuentes está unificada. Flutter usa pubspec.yaml para declarar fuentes: los archivos se colocan en la carpeta fonts/ del proyecto y luego se declaran en la sección fonts con la familia y los pesos. Luego, la fuente se aplica mediante TextStyle(fontFamily: 'Montserrat') o en el tema de la aplicación. Flutter es compatible con TTF y OTF.

React Native usa dos enfoques: nativo (mediante Info.plist y res/font) o mediante bibliotecas como react-native-vector-icons y @expo-google-fonts. Expo simplifica el proceso: las fuentes se cargan mediante expo-font: Font.loadAsync({ 'Montserrat': require('./assets/fonts/Montserrat.ttf') }). React Navigation y los temas permiten establecer una fuente de forma global.

Ejemplo en Flutter

Declaración de fuentes en pubspec.yaml y aplicación en el tema de MaterialApp. Los archivos Montserrat-Regular.ttf y Montserrat-Bold.ttf se colocan en fonts/. Tras la declaración, la fuente es accesible mediante TextStyle en toda la aplicación. Flutter usa automáticamente el archivo bold cuando se especifica fontWeight: FontWeight.bold.

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

Si Flutter no encuentra una fuente en la ruta especificada, la aplicación usa la fuente de respaldo del sistema sin errores. Para depurar, active checkConsistency en MaterialApp: verifica la disponibilidad de fuentes y muestra advertencias en la consola cuando faltan fuentes.

Optimización del tamaño de fuentes

El tamaño del APK y del IPA depende directamente de la cantidad de fuentes incluidas. Un solo archivo TTF pesa 50–500 KB para el conjunto de caracteres latinos y hasta 2–5 MB para fuentes que admiten cirílico, caracteres CJK u otros conjuntos extendidos. Diez fuentes pueden añadir 10–20 MB al tamaño de la aplicación, lo que es crítico para las descargas móviles.

Para optimizar, use subsetting: eliminación de caracteres no utilizados del archivo de fuente. Herramientas como glyphhanger, fonttools (pyftsubset) y Google Webfont Optimizer crean una versión de la fuente solo con los glifos necesarios (latín + cirílico + dígitos + signos de puntuación). Esto reduce el tamaño entre un 50 y un 80%. En iOS, se pueden usar recursos bajo demanda para fuentes que no son necesarias en el primer inicio.

Fuentes variables

Una fuente variable (Variable Font) es un solo archivo que contiene todos los pesos, desde Thin hasta Black y desde Condensed hasta Expanded. Una fuente variable puede reemplazar de 10 a 20 archivos separados con diferentes pesos. El tamaño de este archivo es aproximadamente igual al de 1–2 archivos estáticos. Compatibilidad: iOS 11+, Android 10+, Flutter (mediante FontVariation), React Native (mediante bibliotecas personalizadas).

Compresión y carga bajo demanda

Use WOFF2 para reducir el tamaño de las fuentes entre un 30 y un 50%. En Android con API 29, se puede usar WOFF2 directamente. Para iOS, es necesario convertir WOFF2 a TTF antes del registro. Las fuentes utilizadas solo durante la incorporación o en pantallas específicas deben cargarse mediante recursos bajo demanda (iOS) o Dynamic Feature (Android); así no se incluirán en el APK base.

Rendimiento y mejores prácticas

Las fuentes personalizadas afectan al rendimiento de dos maneras: tiempo de carga y memoria. En el primer acceso, el sistema lee el archivo del disco, analiza las tablas de la fuente y crea estructuras internas para el renderizado. Para una fuente de 1 MB, esto lleva entre 20 y 50 ms. El almacenamiento en caché después de la primera carga elimina el retraso en accesos posteriores.

Memoria: cada fuente cargada se almacena en la caché del proceso. Las fuentes del sistema están precargadas; las fuentes personalizadas se cargan en el primer uso. En memoria, una fuente ocupa aproximadamente 2–3 veces más espacio que en el disco debido a las estructuras analizadas: tablas cmap, glyf, head, hmtx. Para 5 fuentes personalizadas de tamaño medio (3 MB en total), se requieren aproximadamente 6–9 MB de RAM.

Recomendaciones

Limite las fuentes personalizadas a 2–3 familias por aplicación. Use fuentes variables para reemplazar varios pesos. Aplique fuentes del sistema para elementos de la interfaz (botones, etiquetas, listas) y fuentes personalizadas solo para tipografía de acento (títulos, banners). Almacene en caché Typeface en Android mediante un Map y UIFont en iOS mediante variables estáticas.

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

Cargar Typeface en onBindViewHolder solo es aceptable si hay caché. Sin caché, cada llamada a createFromAsset crea un nuevo objeto y lee el archivo del disco. Durante el desplazamiento de RecyclerView, esto causa ralentizaciones notables. La caché resuelve el problema porque la fuente se carga una vez y se reutiliza.