Fuentes Personalizadas Xamarin Forms

Utiliza cualquier fuente personalizada en Xamarin Forms fácilmente

¿Quieres conocer la forma  más sencilla de poder utilizar cualquier  fuente en tus proyectos de Xamarin Forms, agregando una única línea en  todo tu proyecto?

¡Adquiere mi Máster en Xamarin Forms!

Antes de iniciar, te invito a adquirir el Máster en Xamarin Forms, que contiene:

Más de 65 horas de contenido
10 cursos de Xamarin
1 curso tipo Máster de C#

curso de xamarin

Video guía paso a paso para aprender a agregar fuentes a proyectos con Xamarin Forms

Te dejo el video de esta publicación, si es que no quieres ver el paso a paso de forma práctica.

¿Cómo utlizar fuentes personalizadas en Xamarin Forms?

Vamos a ver entonces cómo podemos agregar cualquier fuente que nosotros queramos en nuestro proyecto o en nuestros proyectos basados en Xamarin Forms. Veamos primero una página de unos  release notes, de una versión específica  de Xamarin Forms, específicamente la 4.5.0.530.  En estos release notes, fíjate que  tenemos una sección que nos indica que podemos  agregar fuentes embebidas en nuestro  proyecto de Xamarin Forms, y aquí vienen  los pasos de cómo podemos llevar a cabo  esta acción.

Xamarin Forms Fuentes

Y es que regularmente salen nuevas  características de xamarin forms que  muchas veces ni siquiera nos damos  cuenta que han salido y esto es porque  el proceso o el ciclo de vida de Xamarin Forms es tan rápido que salen nuevos  releases cada determinado tiempo con  nuevas características o con nuevas  funcionalidades que son muy prácticas,  pero que muchas veces desconocemos.

Vamos a ver cómo utilizar esta característica, aquí tenemos un proyecto basado en Xamarin Forms. 

Aquí tenemos nuestra  aplicación, simplemente es un elemento  Label donde tenemos un texto,  y tenemos la font family por default.

Fuentes en Xamarin Forms

Ahora bien, ¿cómo podemos agregar nuestras propias fuentes a este proyecto?  Bueno lo primero que tenemos que hacer es ir a algún sitio web que nos permita descargar fuentes ya sea de paga o bien  fuentes gratuitas.

En este caso tengo este sitio que es bastante bueno, y que nos muestra una serie de fuentes gratuitas que podemos descargar para incluirlas en nuestros proyectos.

Vamos a hacer esta prueba con esta fuente llamada Baliung, aunque podría ser la  fuente que tú quisieras.

Vamos a abrir la página de la fuente, aquí tenemos el preview de esta fuente y vamos a dar clic donde dice descargar.

Usar fuentes en Xamarin

Es una descarga muy rápida, y una vez que hemos descargado esta fuente, lo que vamos a hacer es integrar esta fuente a nuestro proyecto Net Standard de nuestra solución de Xamarin Forms.

Voy a proceder a crear un par de carpetas, esto para mantener el orden en nuestro proyecto. Vamos a crear una nueva  carpeta que se llame por ejemplo  Resources, y dentro voy a  crear una  la carpeta que se llame Fonts, ya que  podríamos tener más de una fuente  incluida en nuestra solución.

Voy a proceder a arrastrar el archivo que he descargado, y voy a renombrar un poco el nombre de esta fuente, esto para que no sea un nombre tan largo.

Como te he mencionado anteriormente la creación de estas carpetas no es necesaria, pero si quieres tener más ordenado tu proyecto, si es recomendable que tengas cierto orden en tu jerarquía en tu proyecto.

El siguiente paso que tenemos que hacer es asegurarnos que esta fuente o estas fuentes que tengas en esta carpeta, se encuentren como Embbed Resource en su  build action. Tienes que asegurarte de tener esta característica, ya que, si no, no te va a funcionar esto que vamos a hacer.

Importar fuentes en Xamarin

Una vez hecho esto, vamos a tener que agregar un atributo llamado “export Font” en el proyecto net standard. Este atributo podría estar en cualquier  lugar del proyecto .net standard, ya que  se registra a nivel del ensamblado, y  esto depende en qué tanto quieres que  sea visible este recurso para otros  proyectos u otros desarrolladores, yo lo  voy a colocar en el archivo llamado  Assembly info.

Voy a proceder entonces en primer lugar a  agregar el espacio de nombres Xamarin.Forms y posteriormente voy a agregar lo  que es un nuevo atributo llamado ExportFont. Entre  paréntesis  tenemos que especificar cuál es el  nombre de la fuente, en este caso es Net_Baliung, tiene que ser el nombre con el  que tengas registrada tu fuente en la  carpeta fonts, de tal forma que quedaría así:

using Xamarin.Forms.Xaml;
using Xamarin.Forms;
[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
[assembly: ExportFont("Net_Baliung.ttf")] 

Otro punto importante es  asegurarte de tener una de las últimas  versiones de Xamarin Forms, en mi caso  personal he actualizado a la última  versión de Xamarin.Forms, la cual es la  versión 4.7.X.

Ya tenemos registrada nuestra fuente, ¿Cómo podemos usar esta  fuente en nuestros archivos tipo XAML? Bueno lo que tenemos que hacer es  especificar el Font Family,  en este caso de nuestro elemento Label, y tenemos que especificar el nombre  que hemos registrado que Net_Balium, que es el nombre del  archivo. Si iniciamos  de nuevo la ejecución de nuestro  proyecto, veremos ya aplicada la  fuente a nuestro elemento Label.

    <StackLayout>
        <!--  Place new controls here  -->
        <Label
            FontSize="Title"
            HorizontalOptions="Center"
            Text="Welcome to Xamarin.Forms!"
            VerticalOptions="CenterAndExpand" 
            FontFamily="Net_Baliung"/>
    </StackLayout> 
Xamarin Fuentes Personalizadas

Como te has dado cuenta es una forma muy sencilla de utilizar fuentes en nuestros proyectos. Anteriormente teníamos que importar esta fuente en cada uno de los proyectos específicos por plataforma, y llevar a cabo algunas configuraciones que nos hacían perder un poco de tiempo, pero con esto que te enseñado, seguramente vas a ahorrar mucho tiempo.

Otra cosa que podemos hacer con estos atributos es especificar un alias, esto para no tener que poner todo el nombre del archivo. Esto se hace de la siguiente forma:

Regresando al archivo XAML, en lugar de  especificar el nombre completo de la  fuente  únicamente tendríamos que llamar el alias desde el Font Family:

using Xamarin.Forms.Xaml;
using Xamarin.Forms;
[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
[assembly: ExportFont("Net_Baliung.ttf", Alias = "NB")] 
    <StackLayout>
        <!--  Place new controls here  -->
        <Label
            FontSize="Title"
            HorizontalOptions="Center"
            Text="Welcome to Xamarin.Forms!"
            VerticalOptions="CenterAndExpand" 
            FontFamily="NB"/>
    </StackLayout> 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *