Fuentes personalizadas en el Flow y Paywall Builder

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

Todos los flows de una misma app comparten las fuentes que subas. Esto incluye los flows que copies. Las demás apps de tu cuenta de Adapty necesitan sus propias fuentes.

Tip

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

Warning

El archivo que subes es solo para la vista previa en el editor: Adapty no lo envía a los dispositivos de los usuarios. Para renderizar la fuente en el dispositivo, incluye el archivo en el bundle de tu app. Sin él, el SDK usará SF Pro (iOS) o Roboto (Android) en tiempo de ejecución.

Si necesitas usar fuentes distintas a las del sistema, puedes añadir una fuente personalizada.

Para añadir una fuente personalizada:

  1. Elige Upload new font en cualquiera de los menús desplegables de fuentes.
Añadir fuente personalizada
  1. En la ventana Add custom font, arrastra y suelta los archivos de fuente o haz clic en Select files:

    • Formatos admitidos: .ttf y .otf.
    • Fuentes variables: Adapty crea una cara independiente por cada estilo con nombre del archivo, como Regular o Bold.
    • Varias tipografías a la vez: Añade todas tus fuentes en una sola carga. Adapty lee el nombre de familia almacenado en cada archivo y agrupa los archivos en familias. Por ejemplo, 10 archivos de 2 tipografías se convierten en 2 familias de fuentes con 5 caras cada una.
    • Familias existentes: Un archivo con el mismo nombre de familia que una fuente ya subida se une a ella como una nueva cara.
    Ventana para añadir fuente personalizada con un archivo de fuente en cola
  2. Haz clic en Add fonts. Adapty sube los archivos y muestra una tarjeta por familia de fuentes. Para cambiar el nombre de una familia, haz clic en el lápiz junto al nombre.

    Vista previa de importación: la familia Atkinson Hyperlegible con las variantes Regular, Italic, Bold y Bold Italic
  3. Configura las propiedades de cada variante de fuente individual, si es necesario:

    • Font Family: La familia a la que pertenece la tipografía; puedes moverla a una familia diferente.
    • Font Face: El peso y estilo de la tipografía, que se detectan automáticamente al subir el archivo.
    • iOS font name y Android font name: Los nombres de la fuente en tu app. Deben coincidir con el bundle de tu app.
    Face settings: Font Family, Font Face, iOS font name, and Android font name

Al subir el archivo de fuente a Adapty, confirmas que tienes derecho a usarla en tu app.

Gestionar una fuente personalizada

Haz clic en Edit custom font para abrir la pantalla de edición de propiedades.

Edit custom font window: the family name, four styles, and the Add font face button
  • Para cambiar el nombre de la familia, edita Font family name in Builder.
  • Para añadir un nuevo peso o estilo, haz clic en Add font face.
  • Para corregir el nombre de fuente de iOS o Android de un estilo, haz clic en su fila.
  • Para subir un nuevo archivo para un estilo, haz clic en su fila y luego en Replace.

Eliminar una fuente personalizada

Para eliminar una familia de fuentes o una cara concreta, haz clic en Delete font family o Delete font face en la pantalla de edición de propiedades.

Si alguno de tus flows utiliza esa cara, Adapty no puede eliminarla directamente. En su lugar, se te pedirá que selecciones una fuente de reemplazo de tu biblioteca. Los elementos que usaban la cara anterior pasarán a utilizar la nueva fuente. Haz clic en Replace & delete para confirmar tu decisión.

Reemplazar Ubuntu-Bold antes de eliminar: una familia y cara de reemplazo para cada cara en uso

Fuentes personalizadas en plantillas de flow

La biblioteca de plantillas de flow incluye plantillas con fuentes personalizadas. Pasa el cursor sobre el chip Custom font de una tarjeta de plantilla para ver qué fuentes utiliza.

Adapty no incluye estas fuentes. Tienes que obtenerlas por tu cuenta, asegurándote de que los nombres coincidan con los que aparecen en el chip. Algunas fuentes pueden requerir una licencia comercial.

Una vez que tengas los archivos de fuentes, sigue los pasos de integración que se indican a continuación.

Añade los archivos de fuentes al bundle de tu app

Adapty no envía fuentes personalizadas a los dispositivos de los usuarios, por lo que tu app debe incluir el archivo de cada tipografía que usen tus flows. Si tu app ya usa fuentes personalizadas, añádelas de la misma forma. Si no es así, sigue la guía de cada plataforma:

El flow identifica cada fuente en tu app por su nombre, por lo que los nombres en Adapty deben coincidir con los de tu app. Para revisar los nombres, abre el estilo en los ajustes de fuentes:

  • iOS font name: El nombre PostScript almacenado dentro del archivo de fuente. iOS encuentra la fuente por este nombre, no por el nombre del archivo. Debe ser único entre todas las fuentes personalizadas de la app. Adapty lo rellena cuando el archivo lo declara. Los archivos de fuentes variables a menudo no lo declaran, así que introdúcelo manualmente. Para encontrarlo, abre Font Book > PostScript name, o usa la API UIFont.
  • Android font name: El nombre del archivo en res/font/, sin la extensión. Usa solo letras minúsculas, números y guiones bajos. Adapty nunca lo rellena. Todas las variantes que Adapty crea a partir de un archivo de fuente variable comparten este nombre.