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.

google-web-fonts_interface

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.

google-web-fonts-choices

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=’http://fonts.googleapis.com/css?family=Rokkitt:400,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-implementation

Conclusion

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
godzilla-fing-fang-foom
The Incredible Photoshop Work of Norman Soo

Norman Soo Every now and then you come across an artist...

New features of Illustrator
The Best New Features of Adobe Illustrator

The Best New Features of Adobe Illustrator I am glad to...

3dwireframefeat
Working With 3D in Illustrator

Being Aware of 3D in Illustrator Illustrator is the go-to place...

Premium
Monarch Social Sharing plugin
Breaking News: Elegant Themes Releases Monarch

Monach Social Sharing Those of you who’ve read my blog for...

large-background-images-feat
30 WordPress Themes With Large Background Images

Large Background Images Standard website layouts with logo and navigation on...

Responsive-web-design-devices
Mobile Design Vs. Responsive Design

Deciding between a mobile or responsive design can be a difficult...

Monarch Social Sharing plugin
Breaking News: Elegant Themes Releases Monarch

Monach Social Sharing Those of you who’ve read my blog for...

large-background-images-feat
30 WordPress Themes With Large Background Images

Large Background Images Standard website layouts with logo and navigation on...

WordPress video courses
Enter to Win 1 of 5 WordPress Seo Courses

WordPress Seo Courses Even if you’re a really advanced blogger, chances...

Bluehost: The Best web hosting provider
Who is the Best Web Hosting Company?

10 Best Web Hosting Companies Choosing the best hosting service for...