|
|
|
|
|
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.
|
|
 |
|
|
|
|
|
|
|
|
|
|
 |
1.
|
|
|
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.
|
|
| |
2.
|
|
|
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.
|
|
| |
3.
|
|
|
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.
|
|
| |
4.
|
|
|
And this is how my text with multiple shadow Google effect applied to the font looks like in Chrome browser.
|
|
| |
5.
|
|
|
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.
|
|
| |
6.
|
|
|
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.
|
|
|
 |
|
 |
|
 |
|
|
