A guide to Google Fonts, the free library for fonts to use online

Tempo di lettura : 8 minuti

It is a collection of application programming interfaces, or APIs, that allow users to use web characters on their site or application, and more precisely it is the library that Google launched in 2010 to make available to everyone, with free license, an interactive web directory to simplify the choice and management of characters via CSS and Android. Today we return to focus on a technical aspect that can affect the performance of the site, or the choice of fonts, and we discover in particular what is Google Fonts and why it can help us to optimize the site.

Google Fonts, the font library for the Web

Initially known as Google Web Fonts, the Google Fonts project was founded in 2010 to enable and make it easier to discover and explore fonts; the service is hosted by Google and all fonts and bandwidth are free.

Legally, most fonts are released under the open source license, while some are released under the Apache license, and in both cases are also free for commercial use; this library is also distributed by Skyfonts and Adobe’s Edge Web services and Monotype’s Typekit.

Since 2021, the project has also extended to icons, with a first set of icons materials, symbols made for common communication needs that can be downloaded to the desktop for digital use for Android, iOS and Web.

What is Google Fonts for

The Google Fonts directory has quickly met the interest of users, so that it is estimated that the characters have been viewed 54,199,093,508,380 times (that is, 54 billion times) and downloaded in over 20 billion cases – Basically, it is like every person on Earth has downloaded each font at least 2 or 3 times.

To date, the collection includes 1092 families of characters that contribute to “confer personality and performance to websites and products”, as read on the project website, constant reference now for anyone who wants to download fonts to use to create a site or design graphics.

This library is in fact used by a large part of web masters and web designers who are looking for solutions for their professional projects, and it is quickly set as the standard for the readability of web projects – thanks also to the weight of Google as a search engine and not only, of course.

According to some statistics, there are 42,781,913 live websites that use the Google Font API, which is used by well over half of the sites that are among the ten thousand most visited in the world and is in first place on the Internet in the Font category.

Why to choose Google Fonts

The concept behind Google Fonts is “simplicity”: as we know, web fonts can have an impact on the loading time of a page, but also on the usability and readability of content. In one word, they affect the user experience, but at the same time they also provide immediate information to the user about what the brand wants to communicate and the way it presents itself, because they are like the tone of voice of a content.

Being able to count on a library of thousands of Google fonts – free, of the highest quality and ready to use – is definitely a huge advantage for those who are working on a web project and also want to take care of the graphic aspect that will assume its communication.

Another aspect that explains the success of Google web fonts is practicality: the content of this extensive database is optimized for proper display on any media, device and platform. Compared to the classic fonts, these fonts are already created for Web display on monitors and screens, and therefore have a much more modern and fresh character – which also benefits the view of users.

From the technical point of view, then, Google ensures that the code generated by the platform is already optimized and allows servers to automatically send the smallest file possible to each user based on the technologies supported by its browser, using for example WOFF 2.0 compression when available. In this way, web pages become faster for all users, especially in areas where bandwidth and connectivity are a problem, and “everyone can enjoy the same quality and integrity of design in their products and Web pages, regardless of where they are in the world”.

The (also SEO) advantages of Google fonts

Wanting to try and summarize and outline the main advantages of Google Fonts, we can say that they offer some positive features not only in terms of readability and aesthetics, but also for the performance of content, with possible beneficial effects even for the SEO.

In particular, Google fonts are:

• Aesthetically pleasing, attractive and appealing, and therefore able to capture the attention of users.
• Optimized for the web: the Google Font library ensures font compatibility on all devices, platforms and media, for a correct and enjoyable reading.
• Readable: for each font family there is also a different “weight” that allows you to diversify the text content from the headings, for example, so as to characterize and optimize the visibility of the page.
• Lightweight: Google Fonts APIs are compressed and optimized, so a web page that uses them has a generally higher loading speed than one that uses different characters. In addition, Googlebot could scan Google font families faster.
• Different and versatile: the online catalogue is rich and constantly expanding, so everyone can find a right font for their digital project.
• Free: as opposed to those available on other platforms, the fonts in this library are free and freely installable on each site and application.
• Compatible: all fonts on the site comply with precise standards of the Google community and ensure high levels of compatibility.

Which are the most used and appreciated Google fonts

It can also be useful to find out which are the five most viewed and downloaded Google fonts in the world, so as to understand the features sought by designers (and appreciated by users anyway).

The first place in the ranking is the prerogative of Roboto, a sans-serif offered by Christian Robertson and set as a system font for Android: displayed almost 17 billion times, it declines in 12 different styles (many of which are also present in these Google Fonts analytics: for example, Roboto Condensed is in sixth place overall). According to the official description, Roboto has “a double soul”, since it has a mechanical skeleton and shapes that are largely geometric combines friendly and open curves; the result is a style that allows you to place the letters in their natural width, making the pace of reading more natural.

To the second place we find Open Sans, a highly readable font created by Steve Mattson, which Google itself uses on some of its print and web sites and ads: among the main features are a design with a vertical stress, open shapes and a neutral appearance, but friendly.

The bronze medal goes to Side of the Polish Łukasz Dziedzic, described as a character that, thanks to semiround details of the letters, offers “a feeling of warmth, while the robust structure gives stability and seriousness”.

To complete this top five come Montserrat and Oswald: the first is a Google font created by Julieta Ulanovsky, composed of 18 different styles ranging from the lightest to the heaviest; Oswald by Vernon Adams is a reworking of the classic style historically represented by the Alternate Gothic sans serif characters, redesigned and reformed to better fit the pixel grid of standard digital screens.

How to choose Google Fonts

The Google Fonts catalogue includes over a thousand character families, as mentioned, and this vast choice could complicate (or at least lengthen the time) the search for the best font for your site.

To overcome the obstacle, the official website of Google Fonts allows you to set different filters to perform a targeted search; in particular, we can intervene on the following fields:

• Search: we can write the name of a specific font, that we already know.
• Preview Text: provides a preview of the visual effect of the font, selecting a basic text or inserting a sentence of our choice.
• Font Size: sets the pixel size of the text shown in preview.
• Categories: filters font type based on the 5 categories in which all Google fonts fall
• Language: narrows down the search based on the alphabet of a language (Latin, Chinese, Cyrillic, Arabic, for example).
• Font properties: selects some font properties, such as thickness, number of styles, width and inclination.

What are the categories of Google Fonts

It is worth investigating which are the 5 categories of Google Fonts, which define the style of the families of these characters for the Web.

• Serif: as in classical typography, this category includes all fonts that present graces (also called sticks or serifs), namely special orthogonal stretches at the ends of each letter.
• Sans-serif: is the family of fonts that does not have the serifs and are therefore missing the terminal traits.
• Display: are characters usually designed for large headers, which frequently have little space between a letter and the other for a more impactful effect.
• Handwriting: fonts that imitate handwriting.
• Monospace: families of characters that have the same width and that remind in some way the style of the typewriter.

How to add a Google font to the site

The local installation of Google Fonts on a PC is done manually: just visit the Google Fonts site, select the font and click on Download to download a Google font (single font or the whole family) in zip format. To install the font on the pc just unzip the folder, right click on the ttf file and select install: now we can use the same fonts of the blog or site to create ebooks or graphics in line with the Web style.

There are two main methods to add Google fonts to our projects, in particular to a WordPress site: we can install a plugin to delegate the work or proceed with manual installation.

First of all, if we work in the WP environment we have to check if our theme does not already provide default Google fonts (frequent situation with premium themes of the latest generation), controlling the features in the configuration panel. If this option is not available, we can download a plugin (such as Easy Google Fonts or Google Fonts Tipography), install it on the panel and proceed with the selection of the preferred font.

If you want to use the Google Fonts API to add fonts to web pages manually it is not necessary to perform any kind of programming, since you just need to add a special link to the stylesheet to the HTML document, then refer to the character in a CSS style. In particular, we can make “copy and paste” of the <link> tag code in the <head> section of the page, and then use the provided CSS to apply the rule to HTML elements.

The best practices to chosse Google web fonts

So we understand what Google fonts are and how to choose them and install them on our website or blog, and we can then launch into the latest reflections related to tips for the use of these characters in our online projects.

The font has an important role in visually defining the style we want to give to our site and our pages, which can not be disconnected from the target audience to whom we think of addressing. Web design studies have highlighted the “rules” related to fonts, colors and shapes according to the areas of belonging – which is concretized for example, in the use of green comes for nature, health and well-being – and there are “best practices” General that also apply in the choice of Google fonts.

• The fonts must primarily be easy to read, since the fundamental purpose of a text is to be read.
• As a corollary, it is good to remember that fonts of too small size could be tiring to read: instead of sacrificing the ease of reading, it is preferable to enlarge the size of the font (pointing at least around 16 – 17 pixels).
• If we find a font that we like aesthetically, but that is difficult to read, we could still use it only for some graphic elements and not for the main text of the contents.
• It is better to run cross browser compatibility tests before setting the font for the site, to be sure that it is displayed correctly on all browsers, or at least on the most popular (Google Chrome, Safari, Mozilla Firefox, Edge) and prevent its appearance from varying slightly.
• Do not exceed with the number of fonts on the same site, and limit yourself to a maximum of two or three different styles, also because each font (each single variation, not only each family) contributes to slightly slow down the site. Each font can in fact add up to 400 kb to the page weight.
• The classic combination to achieve a pleasing visual effect involves the use of a serif font for headers and titles and a sans-serif font for texts. But with the correct use of the font size, weight and color we can achieve a valid effect even with just one font.