Do you want to learn what Google Fonts is and how to use these fonts in your designs? So let’s start at the beginning. You may not know it but until relatively recently, when designing a website you wanted to make sure that the user visualized the chosen font correctly, you had a reduced range of possibilities to choose from.
The reason? That the set of fonts installed by default on computers was limited, so a website that went beyond those options would not display its font correctly (imagine the change in appearance that this can mean in the design). As a result, this problem severely clipped designers’ wings and created an overly standardized Internet.
Times New Roman, Arial, Courier New… are already widely seen fonts with which many projects do not identify.
When did the solution arrive? Well, when web fonts appeared. Web fonts are typefaces that are stored on a server and not on the user’s computer. Thus, when you enter a website that uses web fonts, the font is downloaded as well as the images and the rest of the files on the site.
Web fonts opened up a world of possibilities and for the first time allowed designers to choose from many options. Nowadays, we can already choose a font with the peace of mind of knowing that it can always be displayed and, therefore, the appearance of the web will not vary from one medium to another.
And with that said, we can get down to business.
What are Google Fonts
Google Fonts is a free Google service that offers a repository or catalog of fonts so you can customize the fonts on your website. It was launched in 2010 and, since then, it has managed to spread the use of web fonts on the Internet.
In Google Fonts you will find royalty-free fonts that are compatible with all devices, screen dimensions, and programming languages. In the directory, there are, at the time of writing this post, 987 different families of fonts. All Google Fonts open-source fonts are available to use on all types of websites, both personal and commercial.
Fonts served by the Google Fonts API are compressed so they download to your device as quickly as possible. Once available in the visitor’s browser, the Google Fonts will remain stored in the cache in case they are needed again later. Thus, the more use the Google Fonts API receives, the more likely it is that a visitor already has a font stored in the browser’s memory and does not need to download it.
Advantages of Google Fonts
The use of Google Fonts implies two fundamental advantages:
- You can improve the appearance of your website for free: Google Fonts gives you access to hundreds of different fonts (most of them) of professional quality. Just a few years ago, you would have had to pay a pretty penny to access such a resource.
- You will gain consistency across platforms: At the time of writing this post, the Google Fonts API is supported by Google Chrome at version 4.249.1 or higher, Mozilla Firefox at version 3.5 or higher, Safari at version 3.1 or higher, Opera in version 10.5 or higher and Internet Explorer in version 6 or higher.
Drawbacks of Google Fonts
As I explained above, the use of web fonts means that first-time visitors will call an external server to load the text. That is why it is not advisable to use an excessive number of fonts and styles on the same page: do not complicate yourself or the speed of your website could suffer. I think that, for each font, 3 styles should be enough: a normal one, an italic one, and a bold one (and the italic one is seen less and less).
One way to avoid that external query and potentially reduce loading speed issues is to not serve the fonts from Google’s external server, but rather from your own hosting. You can host the fonts on the same server where you host your website and serve them through your CDN. In this way, you will have more control to optimize the requests made (for example, combining all the sources in a single file and, therefore, a single request), the caching, and on the compression.
How the Google Fonts catalog works
Now that I’ve explained a little about what Google Fonts is, I’ll tell you how the catalog works.
As you can see in the previous image, to help you choose a font, Google offers you a drop-down menu with 5 main categories :
- Serif: Fonts that include serifs or serifs at the end of each letter. Garamond or Times New Roman are two well-known examples.
- Sans serif: Unfinished typefaces, such as Helvetica or Arial.
- Display: Being more ornamental, they are fonts designed above all for titles or short texts (and not for paragraphs). Their eccentricity gives them personality, but they are not as readable. Good examples are Lobster or Monoton.
- Handwriting: These are fonts designed to mimic handwriting. You have to choose carefully because they don’t always scale well and that can affect their readability. As you can imagine, they are also not suitable for large bodies of text. Surely examples like Comic Neue or Pacifico sound familiar to you.
- Monospace: Monospaced fonts are those in which each and every letter occupies exactly the same space. One of the best-known examples is Courier.
The “Language” dropdown also allows you to choose the alphabet in which you are going to write (by default, the Latin alphabet is shown). In “Font Properties” you have other important aspects, such as the number of styles you want your font to have, its thickness, its inclination or its width.
In addition, the catalog is, by default, ordered according to the popularity of the sources at the specific moment in which the user accesses it. However, we can also sort them alphabetically, by popularity history (to find the most successful fonts over time) or by date of publication in the catalog.
What do you want to test how a specific sentence looks written with a font from Google Fonts? You can enter the phrase you want, see the entire alphabet, the numbers or see a complete paragraph in the size you prefer. You just have to click on the drop-down in the following screenshot and choose the option you prefer:
Another great option to test how your website (or anyone else’s) would look with a Google Font that you like is the Google Font Previewer for Chrome extension. You just have to install it in the browser from the previous link, click on the corresponding icon, and choose the font you want to test on the web you have opened. It won’t work perfectly, but it will give you an idea.
Once you have decided which Google Font you are going to use, you just have to copy the line of code provided by Google for it. In the next section, I explain it with an example.
How to add Google Fonts to your website manually
Have you already chosen font from the Google Font catalog and now you are wondering how to use it on your website? Well, I’ll explain it quickly, because it’s very easy. With screenshots, you will see it better.
I have chosen a source called Merienda and have clicked on the “Family Selected” box that appears at the bottom right of my screen.
Now, in the “Embed” tab I can see two codes. The one I should use on my website is the first link, the code that appears in the upper gray box.
If I have a custom website…
It is very simple:
- I open the index.html file or the one where the header code of my website is located.
- I look for the <head> tag and add the link that I told you about, the one in the upper gray box of the previous image. Note: The link must go between the <head> tag, which marks the beginning of the header of my website, and the closing tag </head>, which marks the end of the header.
- In the end, my index.html will be something like this:
If I am going to use Google Fonts in WordPress…
There are several ways to add Google Fonts to WordPress but you don’t need to use a plugin to do so. If you have minimal knowledge of web programming, I recommend that you do it as follows:
- I go into my dashboard, go to my active theme folder and open the functions.php file.
- I paste the following code in the functions.php inside the special <?php and ?> tags:
Attention: Remember to replace the link of my font ( https://fonts.googleapis.com/css?family=Merienda&display=swap) with the link of the font that you have chosen.
It is always advisable to make these changes in a child theme, since if they are made on the parent theme, when it is updated the changes will be lost. If you are not sure, now is a good time to learn what a child theme is and how to easily create one for your template.
If all this has seemed very complicated to you and you prefer not to touch the HTML of your WordPress directly, below I will explain how to use Google Fonts through different plugins.
Specify fonts in CSS
Now that I’ve manually added the call to my Google Fonts font, I can specify the font in my CSS code and indicate how I want to use each style. I’ll do it from my template’s style.css file using the code in the bottom gray box in the image above. For example, on my website, I want to use the Merienda font only in the titles, so I will specify the following in my style.css:
3 Best Google Fonts Plugins for WordPress
Today there are already many templates that include the option to use Google Fonts from the theme editor itself. Some page builders, like Elementor, have Google Fonts built-in so you don’t need to install anything anymore. However, sometimes the way the template is built may not be too optimized, so you may want to disable Google Fonts in the theme and add them yourself.
Next, I leave you 3 plugins that can help you, whether your template does not give you facilities to use Google Fonts or if you do not trust its method very much:
WP Google Fonts
Of the ones I’ve tried, WP Google Fonts is my favorite plugin for uploading Google Fonts to WordPress. It is installed and activated and you are ready to add fonts and assign them to the elements you want (titles, text paragraphs, lists, etc.). There is a maximum limit of 6 fonts, but if you need more, you are creating a tremendous hodgepodge on your website.
WP Google Fonts couldn’t be easier to use and it’s perfect for Google Fonts and only Google Fonts – it doesn’t allow you to upload any other type of font.
Use Any Font
I don’t like it as much as WP Google Fonts because it seems like a bit dated interface, but Use Any Font works well and is another good option for adding fonts to WordPress. The downside is that the 100% free version only allows conversion from a single source. The good news is that with a $10 contribution, you can enjoy unlimited usage for as long as you want.
It is an easy-to-use plugin and includes detailed instructions (which are not really necessary, because it is self-explanatory). After activating it through API (there is a link on the activation page to get a Lite or Test key, the free one), you will only have to upload the fonts you want in any of the supported formats (.ttf, .otf, or .woff ) and you can now assign them to titles, paragraphs or quotes, for example.
If you don’t want to stick to just Google Fonts, Use Any Font allows you more freedom to add other types of custom fonts.
Easy Google Fonts
Many people wonder how to use Easy Google Fonts at first because it is a bit more confusing than the previous ones. It’s just a little different because Easy Google Fonts is used from within the editor, rather than just snapping on and off. Why? Well, because that way you have the preview available and you can check the result that your new sources give before publishing. Very useful indeed!
From the editor, you can specify font, style, color, size, margin, etc. for each item. The editor’s customization options are very numerous although, yes, you will only be able to work with Google Fonts and you will not be able to upload other personalized fonts.
How to download fonts from Google Fonts
And if what you want is to have the fonts stored on your computer to use not only on a website but also in documents of different types, mock-ups, etc., you can download the fonts from Google Fonts just as easily. You just have to select the sources that interest you and click on the “Download family” link that appears in the upper right corner of this screenshot:
This is also what you should do if, as I mentioned above, you want to host Google Fonts fonts on your own hosting so you don’t have to make requests to Google servers.
And what are the best Google Fonts fonts?
With all the variety out there, it can sometimes be hard to make a decision. If we are objective and we go to pure and hard usage data, there are typefaces that are clear winners. For example, let’s see the visit report for the last year (at the time of writing this article):
As you can see, fonts like Roboto, Open Sans, and Lato are the most popular in 2019-2020.
If you want to see the most updated fonts for the date you are reading the article, you have them here: https://fonts.google.com/analytics They may have changed over time, but if you decide on any of the first 10 fonts on the list, it will be rare for you to fail.
And what if you don’t want to stick to the most popular typefaces? Maybe you fancy something more original, but you don’t want to risk it with an unknown source. In that case, there are some Google Fonts that are quickly gaining traction but haven’t made it to the top of the list yet. You can try any of them!
- Noto Sans or Noto Serif: Noto is a font designed by Google itself that supports more than 30 scripts and we have both serif and sans serif families available. Noto fonts are designed to be visually clear, elegant, and simple. The truth is that the result is very clean.
- Playfair Display: A serif font by Claus Eggers Sørensen for titles and subtitles, it looks great when paired with Georgia for body text.
- Poppins: Created by the Indian Type Foundry, this sans-serif font is being used for both titles and longer text. It is very comfortable also on mobile, from what I have seen
- Vollkorn: I love this serif font designed by Friedrich Althausen. It’s unobtrusive but works great both on the web and in print, in paragraphs, and in headings.
- Muli: Sans-serif font by Vernon Adams. It is very versatile and I think it is perfect both in titles and in body text because it has enough space between its letters
- Nunito: A sans-serif font also created by Vernon Adams. It is perfect for display, that is, for elegant and modern titles
- Fira Sans: Font designed by Erik Spiekermann and Ralph Du Carrois for Mozilla. I absolutely love it in every way I’ve seen it. It simply looks great on the web and in any size.
- Quicksand: The work of Andrew Paglinawan, is a sans-serif font designed for display. Although theoretically, it should also work with smaller sizes, for my taste it loses too much readability.
- Work Sans: A sans-serif font designed by Wei Huang. The styles at the center of the family (Regular and Medium) are intended for paragraphs and prints, while the more extreme options have been designed for display.
Basic checks when choosing a font
Whichever font you choose, the important thing is that you test it correctly and rate the results carefully. I’ll give you some general advice:
- Have you chosen a font that fits your brand? Don’t forget your corporate values and choose a font that harmonizes with them.
- Do tests with different devices and resolutions to see the behavior of the source in each case.
- Will you need printed materials? Also, check if the chosen source is useful for this type of communication.
- Test the font with different bodies of text: paragraphs, titles, subtitles… The font must have sufficient styles, be legible in each case and have a good contrast ratio.
- Make sure that it includes all the characters that you are going to need (it will not be that you later miss the “ñ” or the accent marks, for example).
- Choose a limited number of fonts and styles: the most common is to choose the main font and a secondary font that harmonize with each other.
Next: Variable Fonts
Variable fonts officially came to light under the name of OpenType Font Variations (.otf files) just a few years ago, in 2016, but from the beginning, they posed a typographic revolution. And it is not surprising, since the promoters of the project were the 4 quintessential internet giants: Google, Apple, Microsoft, and Adobe.
A variable font is, simply put, a single font file that works like multiple fonts, being flexible in weight, width, slant, or any other attribute the typographer wants to design (and without adding weight). of the file). In this way, we can say that with a single variable font, a huge number of styles can be achieved without affecting the loading time of the web, since in reality there will only be a single OpenType file.
Imagine what this means for responsive design. They are fonts whose size can be reduced or enlarged, condensed or narrowed, to achieve better readability depending on the device that is being used to view the web. All this automatically.
However, for variable fonts to become the norm, there is still work to be done. There are already some fonts available, but there is a lot of variety that designers will have to add. In addition, software and browsers are also going to have to catch up (although some already have ).
Want to experiment with variable fonts? Visit TypeDetail, Axis-Praxis, or V-fonts and play around with their interfaces or even download them to try them out.
Go ahead: are you going to use Google Fonts?
When designing a website, sticking with the default fonts may seem like the easiest thing to do. However, I believe that choosing the right font can have a very positive impact on the success of your website. From the logo to the numbers, good typography establishes a kind of non-verbal communication with your visitors, thus influencing their perception of your project.
Consequently, I find Google Fonts to be an invaluable resource for a web designer, especially considering how intuitive and convenient the catalog is to use. Google Fonts offers you readable and accessible fonts, for commercial and personal use, and with the most varied aesthetics to fit in all kinds of projects.
That said: if in the end, you decide to switch to Google Fonts, leave a comment and tell me what you think of the result.
