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.
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.
Añadir una fuente personalizada
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:
- Elige Upload new font en cualquiera de los menús desplegables de fuentes.
-
En la ventana Add custom font, arrastra y suelta los archivos de fuente o haz clic en Select files:
- Formatos admitidos:
.ttfy.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.
- Formatos admitidos:
-
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.
-
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.
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.
- 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.
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:
- iOS: Añadir una fuente personalizada a tu app
- Android: Fuentes en XML
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.