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?

Bueno esto lo  aprenderemos a hacer en esta publicación, pero  antes de pasar a la acción,  te invito al máster en Xamarin Forms para desarrollar aplicaciones  multiplataforma. En este máster de más de  65 horas de vídeo bajo demanda,  aprenderás todo lo necesario para  volverte un experto en Xamarin Forms.

¿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 lo que es 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 lo que es un proyecto basado en Xamarin Forms. 

Aquí tenemos lo que es nuestra  aplicación, simplemente es un elemento  Label donde tenemos lo que es 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 lo que es 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 lo que es 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 lo que es 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 lo que es 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 lo que es 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 lo que es 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 lo que  es 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> 

Añade aquí tu texto de cabecera

Deja un comentario

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

0
    0
    Your Cart
    Your cart is emptyReturn to Shop