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
Introducción
Introducción
Javier Suárez | Blog 