Fuentes personalizadas en SwiftUI y Xcode

La tipografía es, sin duda, el pilar fundamental del diseño de interfaz. Para un iOS Developer, romper con la monotonía de la fuente del sistema (San Francisco) y aplicar la identidad visual de una marca es una habilidad esencial. Aunque SwiftUI ha simplificado enormemente la creación de interfaces, la gestión de tipografías externas sigue teniendo sus trucos.

En este tutorial, no solo aprenderás a importar un archivo .ttf o .otf. Vamos a profundizar en la arquitectura correcta para gestionar fuentes personalizadas en SwiftUI y Xcode, asegurando que tu código sea escalable, seguro y compatible con Dynamic Type (accesibilidad) en iOS, macOS y watchOS.

Paso 1: Preparación del Entorno en Xcode

Antes de escribir una sola línea de programación Swift, debemos configurar el proyecto correctamente. Muchos errores comunes nacen aquí, así que presta atención a los detalles.

1. Importar los archivos de fuente

Arrastra tus archivos de fuente (preferiblemente .otf o .ttf) a tu navegador de proyectos en Xcode. Al soltar los archivos, aparecerá un cuadro de diálogo. Es vital que marques la casilla “Add to targets” y selecciones tu aplicación principal.

Nota para expertos: Si estás desarrollando para múltiples plataformas (por ejemplo, una App de iOS con una extensión de Watch App), debes asegurarte de que el archivo de fuente esté marcado para ambos targets en el “File Inspector” (panel derecho en Xcode).

2. Configurar el Info.plist

El sistema operativo necesita saber que estas fuentes existen. En las versiones modernas de Xcode, esto se hace en la pestaña “Info” del target, o editando directamente el archivo Info.plist si tu proyecto aún lo usa explícitamente.

1. Añade una nueva clave llamada “Fonts provided by application” (el nombre crudo es UIAppFonts).
2. Esto creará un Array.
3. Añade un elemento por cada archivo de fuente. Importante: Debes escribir el nombre del archivo completo, incluyendo la extensión (ej. Montserrat-Bold.ttf).

Paso 2: Descubriendo el “Nombre Real” de la Fuente

Aquí es donde el 90% de los desarrolladores fallan. El nombre del archivo (Montserrat-Bold.ttf) no es siempre el nombre que se usa en código. Necesitas el “PostScript Name”.

Para evitar adivinanzas, recomiendo ejecutar este pequeño script en tu App.swift o en el init de tu vista principal temporalmente. Esto imprimirá en la consola todos los nombres de fuentes disponibles:

import SwiftUI
import UIKit // Necesario para acceder a UIFont en este helper

func printAllFontNames() {
    for family in UIFont.familyNames {
        print("Familia: \(family)")
        for name in UIFont.fontNames(forFamilyName: family) {
            print("   - Nombre de uso: \(name)")
        }
    }
}
// Llama a esta función en el .onAppear de tu primera vista

Paso 3: Implementación Básica en SwiftUI

La forma más directa de usar fuentes personalizadas en SwiftUI y Xcode es mediante el modificador .font(.custom(...)).

Text("Hola, iOS Developer")
    .font(.custom("Montserrat-Bold", size: 24))

Sin embargo, este enfoque tiene un problema grave: no respeta la accesibilidad. Si el usuario aumenta el tamaño de letra en los ajustes de iOS, tu texto se quedará fijo en 24pt.

Paso 4: Arquitectura Profesional y Accesibilidad (Dynamic Type)

Para desarrollar aplicaciones de calidad, debemos soportar Dynamic Type. Desde iOS 14, SwiftUI nos permite vincular una fuente personalizada a un estilo de texto relativo (como .body, .headline, etc.).

Vamos a crear una extensión de Font robusta y segura. Olvida las “magic strings” dispersas por tu código.

import SwiftUI

// 1. Definimos un Enum para evitar errores de escritura
enum AppFont: String {
    case regular = "Montserrat-Regular"
    case bold = "Montserrat-Bold"
    case light = "Montserrat-Light"
    case italic = "Montserrat-Italic"
}

// 2. Extendemos Font para un uso semántico
extension Font {
    static func appFont(_ font: AppFont, size: CGFloat) -> Font {
        // Esta es la clave para la accesibilidad: relativeTo
        return .custom(font.rawValue, size: size, relativeTo: .body)
    }
    
    // Sobrecarga para vincular a estilos específicos de Apple
    static func appFont(_ font: AppFont, style: Font.TextStyle) -> Font {
        // Mapeo básico de tamaños predeterminados
        let size: CGFloat
        switch style {
            case .largeTitle: size = 34
            case .title: size = 28
            case .headline: size = 17
            case .caption: size = 12
            default: size = 17
        }
        return .custom(font.rawValue, size: size, relativeTo: style)
    }
}

Con esta estructura, nuestro código en la Vista es limpio, seguro y accesible:

struct WelcomeView: View {
    var body: some View {
        VStack {
            Text("Bienvenido a SwiftUI")
                .font(.appFont(.bold, style: .largeTitle)) // Escala como un título
            
            Text("Aprende a gestionar tipografías como un experto.")
                .font(.appFont(.regular, size: 16)) // Escala relativo al cuerpo
                .foregroundColor(.gray)
        }
    }
}

Paso 5: Gestión de Fuentes en macOS y watchOS

El código anterior es perfectamente compatible con la programación Swift multiplataforma, pero hay matices en Xcode que debes conocer.

macOS

En macOS, el proceso de Info.plist es idéntico si usas SwiftUI (App Life Cycle). Sin embargo, si estás creando una app basada en AppKit o híbrida, asegúrate de que los archivos de fuente estén copiados en el bundle de recursos. A veces, macOS requiere un reinicio del simulador para reconocer las nuevas fuentes registradas dinámicamente.

watchOS

En el Apple Watch, el espacio es oro. Evita incluir familias tipográficas completas (Bold, Semibold, Medium, Regular, Light, Thin…). Incluye solo los archivos .ttf que realmente uses. Recuerda marcar el target de “Watch App” en el inspector de archivos de la fuente, no solo el de la extensión.

Solución de Problemas Comunes

Incluso los desarrolladores senior se encuentran con que la fuente no carga y el sistema vuelve a San Francisco por defecto. Aquí tienes un checklist de depuración:

• Nombre incorrecto: ¿Estás usando el nombre del archivo en lugar del nombre PostScript? (Revisa el Paso 2).
• Target Membership: Selecciona el archivo de fuente en el navegador de Xcode y mira el panel derecho. ¿Está marcado el check de tu App?
• Errores tipográficos en Info.plist: El nombre del archivo en Fonts provided by application debe ser exacto, mayúsculas y extensión incluidas.
• Caché del Simulador: A veces, el simulador de iOS se “atasca”. Bórralo (Device -> Erase All Content and Settings) o prueba en un dispositivo físico.

Conclusión

Dominar el uso de fuentes personalizadas en SwiftUI y Xcode eleva la calidad visual de tus aplicaciones inmediatamente. Ya no dependes de la estética genérica de Apple; tienes el control total de la marca.

Recuerda siempre priorizar la accesibilidad. Usar fuentes bonitas no sirve de nada si tus usuarios con dificultades visuales no pueden escalar el texto. Con la arquitectura de extensiones y relativeTo que hemos visto hoy, tienes una base sólida para cualquier proyecto profesional en el ecosistema Apple.

Si tienes cualquier duda sobre este artículo, contacta conmigo y estaré encantado de ayudarte 🙂. Puedes contactar conmigo en mi perfil de X o en mi perfil de Instagram