Are you interested in performance optimization for your next website? OF course you are! Perhaps you are downloading your fonts from a database and keeping these fonts in a separate folder. Give Google Fonts a test drive for your next web development project. The folks over at Google have made using their fonts way easy. Are you ready to give it a try? Well, let’s get started!
Open up the web browser of your choice. I’m currently using Chrome. Go to Google Fonts. Choose a font. The choices are pretty robust and there are new fonts added regularly. There’s a lot in here (at the time of this post, there were 632 font families available) so you can use the filter to narrow your search into categories (Serif, Sans Serif, Display and Handwriting) and scripts.
Google offers a great API for developers to use
Want to know how the font will look before committing to using it? There’s a tool located at the top that let’s you see how the font will look as a word, a sentence, a paragraph or a poster. Google Fonts also lets you choose the size and weight variants (if they’re available) of the fonts as well.
The HTML
Once you have chosen a font, copy the code and place it into the head of your website. This code is hotlinking to the Google API and giving your site 1 less HTTP request.
The CSS
In order to use the font, you have to call on the element from the CSS according to the element from which you named the property. You can also use the fonts via @import or JavaScript. This is when you create your custom variants to the font-size, font-style, font-weight, etc.
Conclusion
Depending on how you use them, loading your fonts from Google Fonts can save on load times for your web page. Since optimizing your site for faster performance is a number one priority for web developers, this option is a no-brainer.