La coherencia visual es clave para un buen diseño. Al crear paywalls sin código, puede que quieras usar una fuente personalizada que encaje con el resto de tu app. Aquí explicamos cómo personalizar fuentes y cómo puedes usarlas.

Qué se puede personalizar

Cada elemento de texto en el Paywall Builder puede tener su propia fuente y estilo. Puedes ajustarlo en los controles de fuente de cada elemento de texto:

En algunos casos, es más práctico cambiar la fuente de todo el paywall. Puedes hacerlo en la sección Layout del Paywall Builder ajustando la Fuente del Paywall.

Fuentes disponibles por defecto

Cuando creas un paywall en el Builder, Adapty usa una fuente del sistema por defecto. Esto normalmente 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, Palatino y Verdana. Cada una de estas fuentes incluye varias opciones de estilo:

Cómo añadir una fuente personalizada al Adapty Dashboard

Si necesitas más opciones de las que ofrece la configuración por defecto, puedes añadir una fuente personalizada. Una vez añadida, estará disponible en toda la app y podrás usarla en cualquier línea de texto de cualquier paywall.

1. Elige Add custom font en cualquiera de los desplegables de fuente:

2. En la ventana Add Custom Font:
   1. Sube el archivo de fuente (tamaño máximo: 10 MB).
   2. Introduce un nombre para referenciarlo en el Paywall Builder.
   3. Especifica los nombres de fuente correctos para ambas plataformas.
   4. Asegúrate de que el archivo de fuente esté incluido en el bundle de tu app si aún no lo has añadido.

Cómo obtener el nombre de fuente correcto en iOS

Hay dos formas de obtener el ID correcto de una fuente: la primera requiere algo de código, y la segunda consiste en usar una app llamada “Font Book”, disponible en macOS.

Si ya has añadido una fuente personalizada al bundle de tu app, probablemente ya la estás referenciando por su nombre de fuente. Para confirmarlo, llama a UIFont.familyNames() para obtener el nombre de familia de la fuente y luego úsalo en UIFont.fontNames(forFamilyName: familyName). Puedes hacerlo en viewDidLoad y después eliminar el fragmento de código:

override func viewDidLoad() {
    super.viewDidLoad()
  	...
  	for family in UIFont.familyNames.sorted() {
    		print("Family: \(family)")
	    	let names = UIFont.fontNames(forFamilyName: family)
    		for fontName in names {
        		print("- \(fontName)")
    		}
    }
}

El fontName del fragmento anterior es lo que buscas. Podría tener un aspecto similar a “MyFont-Regular”.

El segundo método es más sencillo: instala la fuente en tu Mac, abre la app Font Book, encuentra la fuente y usa su PostScript name:

Cómo obtener el nombre de fuente correcto en Android

Si has añadido correctamente el archivo de fuente a la carpeta de recursos, simplemente proporciona el nombre del archivo. Asegúrate de que esté en minúsculas y solo contenga letras, números y guiones bajos; de lo contrario, puede que no funcione.

Puedes confirmar que el nombre del archivo es correcto llamando a ResourcesCompat.getFont(context, R.font.my_font), donde my_font es el nombre de archivo que estás usando. En este caso, my_font es exactamente lo que debes introducir al crear una fuente personalizada en Adapty.

Cómo añadir los archivos de fuente al bundle de tu app

Si ya estás usando una fuente personalizada en otra parte de tu app, solo tienes que añadir las fuentes del paywall de la misma manera. Si no es así, asegúrate de incluir el archivo de fuente en el proyecto y bundle de tu app. Aquí puedes leer cómo hacerlo:

• En iOS: En la documentación oficial de Apple
• En Android: En la documentación oficial de Android