O'Reilly logo

Instant HTML5 Fonts and Typography by K. Jaouher

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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"> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required