Michael Gaigg: Über UI/UX Design

5Feb2

Use FontAwesome font in WPF apps

Posted by Michael Gaigg

What seems to be so trivial on the web feels like jumping through hoops in WPF. But yet again, it's actually that difficult really. Here is how to do:

Custom Fonts in WPF

  1. Download the TrueType font (.ttf) you are interested in, e.g.
    WPF_fonts_FontAwesome01

    Find system name

  2. Find the system name of the font which is most likely different to the filename
    WPF_fonts_FontAwesome02

    Find system name

  3. Add the file to your WPF solution preferably in its own directory like 'fonts'
  4. Check the properties of the font file and make sure the Build Action is set to 'Resource'
    WPF_fonts_FontAwesome03

    Check properties

  5. Add the style reference to App.xaml
    App.xaml

    App.xaml

  6. Include the font x:Key as the StaticResource Style attribute to your TextBlock elements
    Add to TextBlock

    Add to TextBlock

  7. To find the Text of a FontAwesome please refer to the

Here is how this little snippet will look like:

Sample Output

Sample Output

27Nov0

Highlights for Week 47/2011

Posted by Michael Gaigg

15Nov0

Highlights of Week 46/2010

Posted by Michael Gaigg

Anything I've missed?

Post it in the comments or drop me a note.

19Sep1

Highlights of Week 37/2010

Posted by Michael Gaigg

10Aug2

How to use the Google Font API

Posted by Michael Gaigg

Google fonts available

Google fonts available

If you love typography and want some new fonts for your next web project then Google Font API might be worth looking into. It's

  • easy to implement (as I will show)
  • well supported by IE, Firefox, Safari and obviously Chrome
  • open-source
  • free (I should have mentioned first huh?)

End Result

Tangerine font

Code Example

<html>
<head>
&lt;link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'&gt;
<style>
body {
	font-family: 'Tangerine', arial, serif;
	font-size: 2em;
}
</style>
</head>
 
<body>
This text is in <strong>Tangerine</strong>.
</body>
</html>

Implementation

The important parts in above code are to embed the font into your page through the

Link

The link element referencing the google api and your desired font family.

&lt;link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'&gt;

In above case I was referencing two variants delimited by a comma, the regular and the bold variant. Each variant will download an additional font and should be used only when really needed and used on the page to keep loading times as short as possible.

The variant parameter can be omitted for use of default.

&lt;link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'&gt;

One can chose to include multiple fonts by using the pipe symbol, same rules as above apply.

&lt;link href='http://fonts.googleapis.com/css?family=Tangerine|AnotherFontName:italic' rel='stylesheet' type='text/css'&gt;

Style

Use the font within your style sheet by simply referencing the font-family:

body { font-family: 'Tangerine', arial, serif; }

Above examples specifies fallback fonts (arial, serif) that will be displayed (depending on browser) while the font is not loaded yet or if the browser doesn't support the Google Font API (e.g. iPhone, iPad, iPod, or Android).

Oh yes, the fonts are rendered as text and therefore support CSS3 features like text-shadow and rotation.

Tools

Font previewer

Use the Font previewer to play with some style attributes, get the resulting CSS code and see how the end result will look like.

WebFont Loader

Look into the WebFont Loader for getting more control over loading the right fonts at the right time.

The WebFont Loader is a JavaScript library co-developed by Google and TypeKit that also lets you control how browsers behave while the font is still loading as well as using multiple web-font providers.

UPDATE: Chris Heilmann just posted a REALLY nice post about Controlling custom fonts with the Google WebFonts API.

What about you?

Post your link if you are using the Google Font API already. I'd like to see some really creative uses.

Are you using any other Font library?