Create and use icon fonts in a Windows Store App

Are you using PNG icons in your Windows Store application and looking for a way to improve the quality on retina displays? After reading this article, you will know all there is to know about creating a custom Icon Font to use in your Windows Store Application

thanks retina

Windows 8.1 supports a large variety of new hardware, including lot’s of different screen resolutions and maintaining PNGs for smaller and larger displays (think retina support) can be a real pain.

Luckily there is a solution to drastically simplify asset management and where you don’t have to worry about scaling pixels.

So how does it work?

OK? Let’s go. I use Sketch (mac-only unfortunately) to create 3 icons.

Draw some icons and export them to SVG

draw icons

It is not important what program you use. U can also download free existing SVG’s if you want. The result is a folder that contains your icons:

folder

Create the font from the SVG files

name

import

Your icons appear in the new collection:

new collection

select

Fontastic provides an awesome zip file with lots of goodies in it. For Windows 8 we will use the TTF file in the fonts folder:

zip

Let’s check if the font file is valid by opening it in Font Book:

font book

Hurray! It works!

Using the font in a Windows Store App

blend

drag

fonticon

NOTE: if you cannot find the FontIcon in your assets, paste the following XAML in the MainPage.XAML Grid:

<FontIcon />

transport

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <FontIcon FontFamily="transport.ttf#transport" FontSize="96" Glyph="a"/>
</Grid>

Conclusion

We now have a font containing our icons. This means we can:

resuklt

Have fun creating your beautiful icon font!