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
Incluimos el archivo TTF en una carpeta llamada Fonts dentro de los Assets de nuestra aplicación:
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:
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:
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.
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