Instant HTML5 Fonts and Typography

Enhancing fonts with outstanding effects (Intermediate)

We can boost the font with some beautiful effects instead of using images. Two methods can be used to use custom fonts, web hosted font or locally hosted font. We will detail the use of both methods in the following examples.

Getting ready

To get the full code please refer to PrebuiltFontEffect and FontEffect projects.

How to do it...

This recipe takes us through two parts: using predefined effects from Google fonts and creating effects via CSS properties.

We will first cover predefined effects:

1. We will first import the libraries of fonts and effects from Google fonts:

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Philosopher|Tangerine&effect=anaglyph|brick-sign|canvas-print|crackle|decaying|destruction|emboss|fragile|ice|neon|static|3d-float|wallpaper|shadow-multiple|fire-animation|3d"> ...