Dreevoo.com | Online Learning and Knowledge Sharing
Home | Programs | Programming languages | HTML | How to enable new Google web font effects
Click to view your profile

How to enable new Google web font effects

To simplify your web fonts stylizing process, Google has provided a collection of font effects that you can use with minimal effort to produce beautiful display text.

  Author: mat | Version: | 15th May 2013 |  

First thing's first. Create a new html and css document.

If you are not quite sure how, use the Introduction to CSS text styles for beginners tutorial.

Let's add a multiple shadow effect to text.

Between the <head> and </head> tags enter the following Google API request line:

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

Notice the effect=shadow-multiple part of the code? This is the new deal and the actual request to fetch the multiple shadow effect for the font.


And by the way, this is how my CSS file looks like.

It's not crucial for enabling the Google text effects and you don't really need it. I just like putting anything to do with shapes, styles and forms in a CSS file. It's actually a common practice.


Let's now enter some text and add the effect we requested in the previous step.

Between the <body> and </body> html tags enter the following line of code:

<p class="font-effect-shadow-multiple">These new</p>

When adding a Google effect to your fonts, the class you address them with always starts with font-effect- then followed by the name of the effect you want to apply, shadow-multiple in my case.

You can enter something else instead of 'These new', this is only the text part.


And this is how my text with multiple shadow Google effect applied to the font looks like in Chrome browser.


Let's see some other effects Google has to offer as well. Let's add four more of them.

If you want to see the ones I used, simply copy/paste the following lines in your html file. You can paste them directly under the line you added in the first step.

<link href='http://fonts.googleapis.com/css?family=Roboto&effect=emboss' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Roboto&effect=3d' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Roboto&effect=anaglyph' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Roboto&effect=grass' rel='stylesheet' type='text/css'>

As you probably noticed, I'm adding emboss, 3d, anaglyph and grass effect to my text.


Now simply add the text with the effects you called in previous step, the same way you already did in step 3 of the tutorial:

<p class="font-effect-emboss">Google font effects</p>
<p class="font-effect-3d">are pretty</p>
<p class="font-effect-anaglyph">darn awesome!</p>
<h1><p class="font-effect-grass"><a href="http://www.dreevoo.com">dreevoo.com</a></p></h1>

The last line (starting with <h1> tag) is a text link with added effect, that's why it looks a bit different.


And here are different Google font effects I applied to my text.

Go to the actual html file with Google text effects I did and if you want you can download the CSS file as well.

You can also check all the available Google font effects and web browser compatibility.

  Please login to post a comment
  Click to open user profile  
KidCurious, 16th May 2013, 10:10 AM
Nice! Thank you Mat, I love how you included all the HTML lines needed for this to actually work. Usually you only get the lines of codes and if you are a beginner like myself, you don't know what to do with them. Thanks again!
  Click to open user profile  
Sheeva, 16th May 2013, 10:13 AM
Stereoscopic/anaglyph one looks pretty awesome.
online learning made for people