From the course: Productivity Tips for Web Designers

Using Google font effects

From the course: Productivity Tips for Web Designers

Start my 1-month free trial

Using Google font effects

- Hi everyone, this is Sue Jenkins with productivity tips for web designers. In this weeks lesson I'm going to show you how you can create fancy text effects using Google's Font Effects. As you probably already know by now, Google Fonts are free, customizable open source web fonts that anyone can use for commercial and for personal websites. They come with both web and print versions, so you can easily use them in your web design mock-ups before you convert your design into HTML and CSS. Google hosts these fonts for free on their own servers which means when you use them, they'll reliably load quickly to display on your website. What's more, they're beautiful and accessible giving you the ultimate control over font usage for your web designs. I'll presume that you already know how to use Google web fonts, but if you'd like to learn more check out this course from Ray Villalobos in the lynda.com library. In this sample web page, I've already added two Google Fonts to my code. So let's switch over to code view and take a look. The first font is the Rokkitt font, and the second one is Open Sans in three bold weights. In addition, I've already added the appropriate CSS code for my Google Fonts. Here's Rokkitt, and for my heading one Open Sans. Let me show you how this page looks in a browser window. I have great big heading ones, a nice size heading two, I've got a pull quote and some paragraph text. Now I want to show you something new in Google called Google Font Effects, and it's currently in beta but I have a feeling most browsers will start to pick it up fairly soon. To get there, you'll go to this page on your web browser and click on the "Enabling font effects beta" link to scroll down to the bottom of the page. Here's a simple font effect where it says, "This is a font effect!" It's actually the shadow multiple effect and this is something that Google allows through their web fonts. It's essentially like a CSS style, but you're applying it to their fonts. So to make this work all you really need to do is edit a little bit of the HTML in your own code. For instance, where they have the Google Font here listed as Rancho, what you'll be adding is this part after the ampersand. Ampersand effect is equal to shadow dash multiple. That is what you would add to any Google Font to make it use this particular font effect. Here's a look at some of the font effects that are available to you now, along with which browsers currently support those. Mostly it's Chrome and Safari, or just Chrome, but as you can see Firefox and Opera are also jumping in with several of these which is fantastic. Let's add the anaglyph style to our heading one. The first thing we need to do is copy this word, anaglyph, and actually we're going to be typing in and effect is equal to anaglyph. I'll just copy that, and then we'll switch over to Dreamweaver. And I want to add this to my Open Sans. So right before the end of the name, before that closing tick mark, I'm going to type in ampersand effect is equal to, and then I'll paste in the word anaglyph. Now before this is going to work, I have to go get the other part of the code. Let's switch back over to Chrome, and grab this. So essentially, in our HTML, we're going to add a class. Class is equal to font effect anaglyph. We can append our heading one with that code. I'm going to copy that with a keyboard shortcut and head back over to Dreamweaver. Scroll down into the HTML and for my first heading one I'll add the class is equal to, and then I'll type in, or paste in rather, that Font Effect anaglyph. And if I want to, I can copy that and then apply that to my second heading one. Now when we save and load the page in a browser, we should see the effect take effect. Pretty cool! Keep in mind that Google recommends that you pay attention to which browsers support these effects, and that you try to apply these effects to larger fonts because sometimes they don't scale very well. So test them out yourself to see if you'd like to add these effects to your web typography arsenal. As long as you follow the instructions, using these special Google Font Effects can be a really easy task. The next time you need a new font for a project and you want to add something fresh and different from the standard web safe font or standard Google Font, head on over to Google Fonts and try adding one of their special effects.

Contents