Usar fuentes pesonalizadas en Apps Windows Phone y Windows Store

Introducción

La interfaz de usuario de las aplicaciones Windows Phone y Windows Store se basa en el uso del lenguaje Modern UI donde el correcto uso de fuentes obtiene un gran peso permitiendo otorgar un aspecto espaciado y ordenado facilitando el uso de la aplicación.

Segun las guías de estilo de ambas plataformas existen una serie de recomendaciones en cuanto al uso de fuentes que afectan al tipo de fuente, tamaño y espacio donde la fuente Segoe tiene un peso especial. Estas guías nos facilitan en muchas ocasiones el conseguir un aspecto adecuado con un correcto uso de las fuentes. Sin embargo, en ocasiones tenemos la necesidad de usar alguna fuente en concreto por diversos motivos:

• La fuente en cuestión en base de la identidad corporativa de la aplicación que estamos desarrollando por lo que necesitamos usarla.
• La fuente es ya usada en otros entornos como por ejemplo en aplicaciones para otros sistemas.
• La fuente otorga un beneficio en la interfaz de usuario que queremos crear.

Sea por el motivo que sea, en ocasiones, nuestra aplicación tiene la necesidad de usar alguna fuente en concreto.

¿Cómo lo conseguimos?

Fuentes personalizadas

Tanto en el desarrollo de aplicaciones Windows Phone como en aplicaciones Windows Store tenemos acceso a una gran variedad de fuentes a las que podemos acceder utilizando la propiedad FontFamily en elementos de texto. Por defecto tenemos acceso a una gran variedad de fuentes:

• Arial
• Arial Black
• Arial Unicode MS
• Calibri
• Cambria
• Cambria Math
• Comic Sans MS
• Candara
• Consolas
• Constantia
• Corbel
• Courier New
• Georgia
• Lucida Sans Unicode
• Segoe UI
• Symbol
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana
• Wingdings
• Wingdings 2
• Wingdings 3

Como podemos ver la variedad es alta pero… ¿y si la fuente que necesitamos utilizar no esta entre las fuentes disponibles?, ¿y si nuestra fuente (TTF) no se encuentra en el sistema?

¿Cómo usar fuentes personalizadas?

El trabajo con fuentes personalizadas en aplicaciones Windows Phone y Windows Store es sumamente sencillo. Comenzamos con el archivo o archivos de fuente en extesión .ttf. Para poder trabajar con las fuentes debemos tenerlas disponibles en nuestro proyecto.

NOTA: En este ejemplo vamos a utilizar la fuente Cheddar Jack disponible en el siguiente enlace.

Añadir la fuente a la solución

Cheddar Jack

Incluimos el archivo TTF en una carpeta llamada Fonts dentro de los Assets de nuestra aplicación:

Añadimos las fuentes a nuestor proyecto

Tras añadir la fuente, en sus propiedades, estableceremos la propiedad Build Action a Content y la propiedad Copy to Output Directory a Copy if newer:

Content, Copy if never

Para poder utilizar la fuente necesitamos además de saber la ruta y nombre del fichero, el nombre de la fuente (no es igual al nombre del fichero).

Obtener el nombre de la fuente

Para obtener el nombre de la fuente bastará con realizar doble clic sobre el fichero TTF:

Nombre de la fuente

En nuestro caso el nombre de la fuente es Cheddar Jack.

Utilizando la fuente

Añadimos un TextBlock en el contenido del Grid principal de nuestra aplicación y le añadimos en la propiedad FontFamily:

<TextBlock
     FontFamily="/Assets/Fonts/cheddar_jack.ttf#Cheddar Jack"
     FontSize="32"
     Text="Usando la fuente Cheddar Jack!" />

¿Qué significado tiene el texto que hemos indicado?

NOTA: Podemos renombrar el archivo TTF a por ejemplo CheddarJack.ttf y todo seguira funcionando correctamente. Sin embargo, la última parte, el nombre de la fuente, debe reflejar exactamente el nombre de la fuente incluidos espacios.

NOTA: Hay fuentes con problemas de compatibilidad. En estos casos si la fuente se llama Gothan Medium por ejemplo y tenemos problemas a la hora de acceder a la misma debemos quedarnos solo con la primera palabra, es decir, Gothan. Solo necesitamos realizar esta acción ante determinadas fuentes con problemas de compatibilidad.

Usando la fuente Cheddar Jack

Podéis descargar el ejemplo a continuación:

Extra

Ya hemos visto lo realmente sencillo que es trabajar con fuentes personalizadas en aplicaciones Windows Phone y Windows Store pero hay algunos detalles interesantes a comentar.

Acceso a la fuente en runtime

Podemos utilizar una fuente personalizada en runtime utilizando la propiedad FontFamily de un control de texto:

textBlock.FontFamily = new FontFamily("/Assets/Fonts/cheddar_jack.ttf#Cheddar Jack");

Trabajo organizado

Cuando toda nuestra aplicación accederá a fuentes personalizadas no debemos colocar la propiedad FontFamily continuamente con la ruta, nombre del fichero y nombre de la fuente. Debemos hacer un uso adecuado de la potencia disponible en XAML utilizando recursos y estilos.

Podemos crearnos un diccionario de recursos llamado Fonts. Dentro del archivo de recursos podremos organizar las fuentes de la siguiente forma:

<!-- Fonts -->
<FontFamily x:Key="LightFontFamily">/Fonts/Font-Light.ttf#Font Light</FontFamily>
<FontFamily x:Key="MediumFontFamily">/Fonts/Font-Medium.ttf#Font Medium</FontFamily>
<FontFamily x:Key="BlackFontFamily">/Fonts/Font-Black.ttf#Font Black</FontFamily>

Incluimos el diccionario de recursos entre los recursos de la aplicación:

<Application.Resources>
     <ResourceDictionary>
          <ResourceDictionary.MergedDictionaries>
               <ResourceDictionary Source="/Themes/Fonts.xaml"/>
          </ResourceDictionary.MergedDictionaries>
     </ResourceDictionary>
</Application.Resources>

Y desde cualquier control de texto bastara con:

<TextBlock
     FontFamily="{StaticResource LightFontFamily}"
     FontSize="32"
     Text="Usando la fuente Cheddar Jack!" />

Fácil y muy cómodo, ¿cierto?.

Más información

• Dev Center: Text and fonts for Windows Phone
• Dev Center: Quickstart: Text for Windows Phone
• Super Dev Resources: How to use custom fonts in Windows Phone and Windows Store apps