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.

Configura las fuentes en el panel Styles antes de empezar a diseñar el flow. Así, cualquier cambio que hagas se aplicará de forma global.

Fuentes integradas

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.

Built-in fonts

Añadir una fuente personalizada

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.
Añadir fuente personalizada
  1. 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.
    • 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.
  1. Haz clic en Save font.
Add custom font window

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

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:

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.