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. 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=’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!
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.
