A Look Into: Google Web Font Effects

Over the years, we mainly style the font for the size or the color, and it was only recently that we can add text shadow with CSS3. There are times when we need more styles for more stunning fonts, but it would very complicated to create by ourselves. Replacing it with images is still not that good an option.

Adding Stunning Effect with Google Webfont

Here’s some good news. Google Webfont has introduced a feature, which allows us to apply decorative font styles – without the hassle. There are currently over 25 font effects we can apply.

To add the effect, we insert effect= parameter followed by the font effect API name in the Google Web Font stylesheet. In the following example, we added ‘Multiple Shadow’ font effect, which is specified with shadow-multiple (API name).

 <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&effect=shadow-multiple' rel='stylesheet' type='text/css'>
 

Then, we simply add the class name to apply the effect to the font. The class name is specified with font-effect-* followed by the API name. Given the above example, the class name for Multiple Shadow effect would be font-effect-shadow-multiple.

 <p class="font-effect-shadow-multiple">This is Awesome!</p>
 

This is how the Multiple Shadow font effect looks.

In case you are wondering how this effect is achieved, you can inspect the stylesheet, which will show you the following style rule.

 .font-effect-shadow-multiple {
 text-shadow: .04em .04em 0 #fff,.08em .08em 0 #aaa;
 -webkit-text-shadow: .04em .04em 0 #fff, .08em .08em 0 #aaa;
 }
 

The multiple shadow effect is achieved with CSS3 text-shadow property, so the effect will only be displayed in Chrome, Firefox, Opera and Safari. Internet Explorer 9 (and earlier versions) does not support text-shadow property, but it has its own rule to define shadows with Shadow Filter.

Adding Multiple Font Effect

We are allowed to add multiple effects to the stylesheet. In this example, we added three font effects at once: Multiple Shadow, Emboss, 3D. Each effect is separated with the pipeline sign |, as follows.

 <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&effect=shadow-multiple|emboss|3d' rel='stylesheet' type='text/css'>
 

Here is how the Emboss font effect look.

And below is the 3D effect that we’ve just added.

It is worth noting that we cannot add multiple effects into a single element, as the effect style rules will overwrite one another. Furthermore, you can head over to the demo page to see these effects in action.

• View Demo
• Download Source

Further Resource

In Google Webfont documentation you will see the other font effects you can apply, such as Fire, Fire Animation, Neon and many others.

• Google Font API Documentation – Google Webfont