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
iphone-ipad-1
Free Iphone & Ipad photorealistic Mockups

Iphone & Ipad Photorealistic Mockups Why have borne screenshots for your...

Perfect Effects 8 Demo
Perfect Effects 8 Demo

Perfect Effects 8 If you remember a couple of weeks ago,...

Free vector arrows pack
Free Vector Arrows Pack

Free Vector Arrows Pack You can never have enough vector elements....

Premium
konefix free html5 template
Konefix Free Html5 Template

Konefix Free Html5 Template A simple and streamlined site is usually...

premium-wp-themes-feat
Selling the Better Idea: 50 Most Popular Premium WordPress Themes

The 50 Most Popular Premium WordPress Themes People want to be...

Halcyon Days
Halcyon Days Free One Page Website Template

Halcyon Days Getting back to my regularly scheduled posts, it’s Wednesday,...

premium-wp-themes-feat
Selling the Better Idea: 50 Most Popular Premium WordPress Themes

The 50 Most Popular Premium WordPress Themes People want to be...

47405-wp-b
50 Premium Smashing Business WordPress Themes

Top 50 Smashing Business WordPress Themes for Success Sooner or later,...

premium Wordpress themes feat
3 Premium WordPress Themes for Free From ThemeFuse

3 Premium WordPress Themes for Free! The creative designers over at...

50108-drupal-b
50 Special Top Rated CMS Themes

Be Unique and Attractive with 50 Special Top Rated CMS Themes...