How to Add Google Web Fonts to Your Website

Add Google Web Fonts to Your Website

As we all know, there is often more than one way to accomplish the same thing. This is especially true when it comes to web design. There are right ways and wrong ways to do things, but there are also viable alternatives as well. A couple of weeks ago, I showed you how to add custom fonts to your website using @font-face. As easy as that is, I am going to show you how to use an alternative, which is adding Google web fonts to your website. It is just as easy (some might say even easier) to add Google web fonts to your website. You won’t believe how easy it is to add custom fonts to your next web project.


The interface itself isn’t that hard. I actually like how the interface is set up for you to choose which fonts you would like to use. You can preview each font at the size that you would like. You can also sort the selection by different parameters, such as what is popular, or what is trending. You can also view the entire family to see what the variations are before you decide o implement them on your site. This is excellent, because it saves you time and you get to see what each font will look like ahead of time, instead of using a trial-and-error method.

You have to make a selection, Which I Chose Rokkitt, because it has two weights. I chose one with multiple weights, to show you how to use them in your website. Click on add to Collection and a blue menu will show up at the bottom. This part threw me off a bit, because it only shows 1 font, even though there are two weights. When you click on Use, the next screen will ask you how many weights you want to use. Here, you can check both weights to implement them. What I really like about using Google Web fonts is that it shows you how your font choices impact your page speed. No other method does this, and this is something we should all be thinking about when building our websites.


Once you’ve made your selection, scroll down, and Google shows you what code to place on your website. Place it with any other scripts, so that they load properly. They give you 3 methods, which you can select via tabs. These are Standard, @import, and Javascript. Standard should be sufficient for just about any website. For our Rokkitt font, standard looks like the sample below:

<link href=’,700′ rel=’stylesheet’ type=’text/css’>

The part you should pay attention to is “family=Rokkitt:400,700″. It is important to make sure both weights are included here separated by commas. Google goes so far as to show you how to call the desired font via CSS so you can use it in your site. You simply specify the font-family. If you want to use a variation of weight, you specify that by using the font-weight property. This will make sure that you use the font and the weight that you want. It is that simple, and you’re done!



Google web fonts are extremely easy to use in your website. You can browse over 600 web fonts with an easy-to-use interface. Google has made it easy to implement the fonts that you want by providing you with the proper scripts and the css to implement their web fonts into your website. They nearly make it fool-proof. They also show you how the number of fonts that you are using will affect your site’s page speed.

Have you tried Google Web Fonts on your website? Which Google Web Fonts are your favorite? Feel free to share your thoughts in the comments section below.

Your opinion is important to me. Be heard!

Dreamweaver Fireworks Flash Illustrator Indesign Lightroom Painter Photoshop Quark Typography
Screen Shot 2014-12-20 at 2.29.26 PM
Photoshop Time Saving Tips

In this Photoshop tutorial, I’ll teach you ways of working quicker...

Seamless winter patterns
Free Vector Winter Patterns

Winter Patterns In case you haven’t stepped outside recently, Winter is...

Picture 30
Molding Images to a Surface in Photoshop

Molding Images If you want to create some cool effects with...

Graphic design pro
Software Skills Don’t Make You a Graphic Design Pro

Photoshop ≠ Graphic Design Pro I teach a lot of software...

Clinix - Free Bootstrap Templates
5 Free Bootstrap Templates Via ThemifyCloud

Bootstrap Templates Normally, I share one free HTML 5 or bootstrap-based...

An Introduction to Joomla

What is Joomla and it’s Advantages? Joomla is an open-source CMS,...

75 Clean WordPress Blog Themes

Pick the Right WordPress Blog Theme for You WordPress has come...

10 Best Photography WordPress Themes

10 Best Photography WordPress Themes That Make Your Heart Beat Faster...

Top 20 Free and Premium WordPress Themes to Refresh Your Website

Free and Premium WordPress Themes Wait a minute, you say. Have...

20 Refreshing WordPress Themes for Autumn

20 Refreshing WordPress Themes Seasons come one after another, and, fortunately,...