
Fuentes de texto con Xamarin forms para IOS, Android y UWP
Vamos a agregar algunas fuentes de texto a nuestro proyecto Xamarin para customizar un poco el diseño. Aplicaremos la nueva fuente para Android, IOS y UWP.
Lo primero que debemos hacer, es descargar un tipo de fuente. Hay muchas páginas de internet que contienen fuentes de texto que se pueden descargar de forma gratuita, en mi caso lo voy a usar dafont.com y descargar la fuente “Monte Cristo” , “Fluo Gums” y “Powerful”.
Una vez descargadas, vamos a configurar en el archivo app.xaml tres estilos, uno para cada fuente.
Para usar el estilo lo llamamos así desde nuestra vista:
Para IOS
Creamos una nueva carpeta dentro de Resources con el nombre de Fonts, ahí dentro debemos agregar nuestros archivos de fuentes. Fijarte que la acción de compilación sea “BundleResource”.
El próximo paso es abrir al archivo Info.plish con el editor “Generic PList Editor”, para esto seleccionamos el archivo y hacemos clique con el 2º botón del ratón en la opción “abrir con…” en mi caso es la tercera opción.
Una vez abierto tenemos que agregar un nuevo elemento en la lista, hacemos clique en el icono “+” al final de la lista y escribimos “UIAppFonts”.
El próximo paso será escribir el nombre de las fuentes, en este ejemplo voy a agregar 3 tipos de fonts. “Fonts/angrybirds-regular.ttf” , “Fonts/Fluo Gums.ttf” y “Fonts/Powerful.ttf”. Donde Fonts es el nombre de la carpeta que hemos agregado las fuentes.
El resultado final para la configuración de IOS se puede apreciar en la imagen de abajo.
Android
Para Android tenemos que tener en cuenta 2 cosas:
- La acción de compilación debe ser AndroidAsset para los archivos de fuentes
- Debemos indicar el nombre de la fuente después del nombre del archivo, ejemplo: Fonts/Fluo Gums.ttf#Fluo Gums
Al abrir el archivo de fuente, se puede ver el nombre, en este caso lo he destacado en amarillo. Se debe escribir este nombre tal cual, después de la extensión del archivo de la fuente usando la “#” antes del nombre.
UWP
- Para UWP, es muy parecido a Android, se debe indicar el nombre de la fuente después del nombre de archivo, ejemplo: Fonts/Fluo Gums.ttf#Fluo Gums
- La acción de compilación debe ser Contenido para los archivos de fuentes
Se puede descargar el ejemplo desde git.