Implementing Google Fonts into HTML/CSS

It’s been a while since my last article. As a matter of fact, my last one wasn’t even this year! So, while late, I wish you a happy, inspirational and amazing 2017! The last time, I took you through the basics of CSS. While I was actually planning on continuing with the basics, I decided to save that for a bit later. The reason? I am extremely busy with a project for school. So instead of doing that, I have a few simple, bite-sized articles on working with HTML/CSS that should help you designing better websites. The first one up is simple, but very useful: implementing Google Fonts.


The benefits of using Google Fonts

Implementing a font from Google Fonts instead of using a regular font from your computer has multiple benefits. The most prominent is the look of your site. Google Fonts contains over 800 free to use fonts, so chances are you’ll find a font suited to your needs quite easily.

There are a lot of artists and designers who create beautiful fonts, and they have every right to ask money for them. The problem is, however, that these prices can easily go upwards of hundreds of dollars. While that may not a problem for some, for a small blogger like myself, that’s a lot to cough up. Google’s font library on the other hand is free to use and implement. Saving a few bucks never hurts right?

Last but not least, a major benefit is compatibility. Let’s say your friend visits your website, but his computer does not have the font you defined in your stylesheet installed. If that’s the case, the browser will revert to a default font. This could be a big problem, because it can break your design, or at least not bring across your website as you have intended.

Since Google Fonts is openly available, implementing and loading the fonts works on all devices. While it’s possible to give a webbrowser the instruction to download a font that is not available, it isn’t good practice and increases load times. Don’t want to implement Google Fonts for a specific reason? No problem. Use CSS Font Stack to see which fonts can best be used.


Implementing Google Fonts

Implementing Google Fonts is actually very easy once you know how to. Note that I am continuing assuming that you have at least some basic knowledge of HTML and CSS, since the first thing you need is an HTML document and a stylesheet. Assuming these are ready to, head over to the Google Fonts website. You’ll find yourself on a very modernly designed page containing a collection of fonts. From here, you can browse through the collection or use the filters on the left-hand side. When you find the font(s) you want to use, click the “+” sign in the top right corner of that font.

Implementing Google Fonts example

After you have added your font, you’ll see a pop-up at the bottom annotating how many fonts you have selected. After you’re done selecting the fonts you need, click on the pop-up. From there, you’ll get a link tag to add to your HTML head, and the CSS needed to implement it within your stylesheet. Easy right?

You’ll also get the option to customize which font sizes/weights you want to include. However, there is also a load time indicator. The more fonts and options you select, the longer it will take for your website to load, so be sure to keep an eye on it. Note that adding extra options alters the link tag, so be sure to copy it after you are done customizing the fonts.

The only thing you need to do now is update your stylesheet wherever you want to use the font(s) you selected. Just to be sure, check if everything is working and voila: you have now implemented universally available fonts straight from Google!

Implementing Google Fonts example 2

Wrapping up

As you can see, not all meaningful additions to further improve and design your websites have to be hard. As a matter of fact, some just take a few little steps. There are definitely more ways to improve a website without spending a large amount of time, and a lot of them can make a significant difference.

Let me know if this was helpful or if you would like to see more of these types or articles in the future and as always, if you have questions or concerns, feel free to comment below!

Using the Input Function To Get User Input in Python HTML5: Going through the Basics HTML: Finishing the Basics and Practicing
View Comments
There are currently no comments.

This site uses Akismet to reduce spam. Learn how your comment data is processed.