---
title: "Fuentes personalizadas en el Flow Builder"
description: "Sube y utiliza fuentes personalizadas en el Flow Builder."
---

Al crear flows, puede que quieras usar una fuente personalizada para que coincida con el resto de tu app. Aquí te explicamos cómo añadir fuentes personalizadas y usarlas en tus flows.

:::tip
[Configura las fuentes](onboarding-text) en el panel **Styles** antes de empezar a diseñar el flow. Así, cualquier cambio que hagas se aplicará de forma global.
:::
## Fuentes integradas \{#built-in-fonts\}

Cuando creas un flow en el Builder, Adapty usa la fuente del sistema por defecto. Normalmente esto significa SF Pro en iOS y Roboto en Android, aunque puede variar según el dispositivo. También puedes elegir entre fuentes de uso común como Arial, Times New Roman, Courier New, Georgia y Helvetica. Cada una de estas fuentes incluye varias opciones de estilo.
Estas fuentes no se incluyen en el SDK de Adapty y solo se usan con fines de previsualización. No podemos garantizar que funcionen perfectamente en todos los dispositivos. Sin embargo, en nuestras pruebas, la mayoría de los dispositivos las reconocen sin necesidad de ninguna configuración adicional. También puedes [consultar qué fuentes están disponibles por defecto en iOS](https://developer.apple.com/fonts/system-fonts/).

## Añadir una fuente personalizada \{#add-a-custom-font\}

Si necesitas más opciones de las que ofrece la selección predeterminada, puedes añadir una fuente personalizada.

Para añadir una fuente personalizada:

1. Elige **Upload new font** en cualquiera de los desplegables de fuentes.

2. En la ventana **Add custom font**, rellena los siguientes campos:
- **Font name in Builder**: Introduce un nombre de visualización para la fuente. Este nombre aparecerá en los menús desplegables de fuentes del Builder.
   - **iOS font name**: Introduce el nombre PostScript de la fuente. Puedes encontrarlo en Font Book → PostScript name, o a través de la [API `UIFont`](https://developer.apple.com/documentation/uikit/uifont).
   - **Android font name**: Introduce el nombre del archivo de `res/font/`. Usa solo letras minúsculas, números y guiones bajos.
   - **Font file**: Arrastra y suelta el archivo de fuente o haz clic en **Select files**. Formatos compatibles: `.ttf`, `.otf`, `.woff`, `.woff2`.

3. Haz clic en **Save font**.

:::warning
El archivo de fuente que subes no se envía al dispositivo; solo se usa para la previsualización. Nuestro SDK recibe únicamente las cadenas que hacen referencia a la fuente que se usará al renderizar el paywall. Por eso, debes incluir el mismo archivo de fuente en el bundle de la app y proporcionar los nombres de fuente correctos para cada plataforma para que todo funcione correctamente. No te preocupes, no llevará mucho tiempo.
:::

Al subir el archivo de fuente a Adapty, confirmas que tienes derecho a usarlo en tu app.
## Añade los archivos de fuentes al bundle de tu app \{#add-the-font-files-to-your-apps-bundle\}

Si ya usas una fuente personalizada en otra parte de tu app, solo tienes que añadir las fuentes de tu paywall de la misma forma. Si no es así, asegúrate de incluir el archivo de fuente en el proyecto y el bundle de tu app. Aquí te explicamos cómo hacerlo:

- En iOS: [En la documentación oficial de Apple](https://developer.apple.com/documentation/uikit/adding-a-custom-font-to-your-app)
- En Android: [En la documentación oficial de Android](https://developer.android.com/develop/ui/views/text-and-emoji/fonts-in-xml)
:::important
Al descargar paquetes de fuentes, recibirás todas las variaciones de fuente en un archivo comprimido. Añade únicamente los archivos de fuente que tu paywall utilice para minimizar el tamaño de la app. Por ejemplo, si solo usas `OpenSans-Regular.ttf` en tu paywall, no incluyas `OpenSans-Bold.ttf` en el bundle de la app.
:::