How to Use Google Fonts - Step by Step with Screenshots

Google Fonts is a font directory that you can use for free on your website or blog. If you're wondering how to use Google Fonts, you're in the right place. In this article, I'll show you step by step how to start using a font in less than 5 minutes.

What is Google Fonts? Google Fonts is a collection of hundreds of open source and free fonts for personal or commercial use in your projects. The directory was created in 2010 as an initiative to make the web faster and more modern.

Now that you know what it is, follow the next paragraph to understand how to use it.

How to use Google Fonts

1. Go to Google Fonts

Visit the Google Fonts website at fonts.google.com. From there you have access to over 900 free fonts for personal or commercial use.

In the Directory tab, on the right menu you can filter by font style (serif, sans-serif, handwritten, etc.), by weight, language and popularity.

In the center you have all the fonts available. Each font has a variety of styles and weights, so if you're looking for the variation "Roboto Light", for example, you will find it in "Roboto".

2. Search for fonts

If you already have a font in mind, search for the font name in the "Search" field on the top right.

You can click on the text just below the font name to customize and see how it would look with your own content. You can also check how the text would look like with different weights, applying bold, etc. And changing the size in pixels.

By clicking on the font name, you get a lot of information about it, such as its author or designer, its use in various countries and the number of times it has been used on Google Fonts in the last week - with this information, it's possible to get a good idea about the popularity of a font.

Remember, the idea of Google Fonts is to gather the best available free fonts, if you search for a commercial font, you'll probably find only links to external websites, where you can buy the font. This is the case with the "Arial" font, for example.

Although it's included in Windows, it's not a free font to be used in any project. And this is the case for most fonts built-in with operating systems.

Fortunately, you have an alternative: I recommend the website Identifont, to find free fonts, similar to any other commercial font. Just type in the font name and see the list of similar fonts on the left. Then just search for that font in Google Fonts.

3. Click the "+" to add the desired font

After finding the desired font, click on the plus sign to the right of the font name.

A window will then appear at the bottom of the screen.

If you want to select more fonts, just keep searching and clicking the "+" button.

4. Customize your font

Click the window that appeared after you added the font. It will expand.

Click on the "CUSTOMIZE" menu to select different weights or language support for your font.

Pay attention to the "Load Time" indicator in the upper right corner of the window. It indicates the size and loading speed of the font. The more fonts and styles you add, the slower your page will load. Try to keep this indicator green to ensure fast loading.

What are weights?

Weights have to do with the thickness or intensity of the font. For the most elaborate fonts, there is not only the regular and bold format as we are used to, but there can be different variations: light, semi-bold, bold, extra-bold, bold + italic, etc.

For example, if you want to add support for bold and italic text, you need to select "bold", "italic", and possibly "bold italic" weights in this case.

Some fonts have no different weights and are limited to regular only - no bold/ italic, etc.

About languages

Some fonts have support for different characters in Greek, Vietnamese, etc. Rarely does anyone use characters other than "Latin", which covers most of the characters present in Western languages. But if this is your case, you need to select different character support.

5. Add the font to your site

After adding and customizing our font. We have the option to download the font through the download icon in the top right corner, or to embed the font into our website directly through Google Fonts.

The simplest solution is to embed the font on our website directly. Because we don't need to download or host the fonts on our own website.

Embedding the font into your website

In the font(s) selection window, click the "EMBED" tab. You will see two codes:

• The first, in the "STANDARD" tab, is the HTML code that allows you to add the font to your website. It should be pasted into the <head> tag on your website. We'll also talk about "@IMPORT" below.
• The second is the CSS code, which specifies the name of the font. We must copy this code into the correct class so that the font is assigned to the desired text element.

See the examples below for better comprehension.

Examples

1. Example with one font for the whole website

In this first example, we use the standard way of embedding the font. Note that we added the first Google Fonts code in the <head> tag, and the second code also in the <head> tag. We just added it to a <style> tag that sets the CSS code of the page.

If you are able to change a CSS file on your website, it's better if you include this second code inside your CSS file.

When using the body selector in CSS, it makes all text within <body> be styled with the font "Open Sans". NOTE: This may not happen if some other CSS rule is overwriting the font. If this is your case, I recommend looking for more information on a specific CSS topic.

<!DOCTYPE html>
<html>
<head>
	<title>My website</title>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400" rel="stylesheet">
	<style>
		body {
			font-family: 'Open Sans', sans-serif;
		}
	</style>
</head>
<body>
		Open Sans text.
</body>
</html>

2. Example with two fonts

In this second example, we use two fonts. The process of embedding the <link> tag with the fonts is the same. The only difference is that we need to specify the CSS rule to determine which tag or class our font will be applied to.

So what we did here was applying two rules to CSS:

• Everything in body will have the "Open Sans" font.
• All titles (h1 - h6) will have the "Pacific" font.

Note that the font-family property accepts multiple parameters, example: 'Pacific', cursive. This means that the browser will try to load the "Pacific" font, but if by any means it doesn't get loaded, or if it's not found, it will take any standard cursive font from the operating system and use it instead. The same goes for the sans-serif font as a backup for 'Open Sans'.

<!DOCTYPE html>
<html>
<head>
	<title>My website</title>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans|Pacifico" rel="stylesheet">
	<style>
		body {
			font-family: 'Open Sans', sans-serif;
		}

		h1, h2, h3, h4, h5, h6 {
			font-family: 'Pacifico', cursive;
		}
	</style>
</head>
<body>
	<h1>Title in Pacifico font</h1>
	Text in Open Sans font.
</body>
</html>

3. Example with different weights

In the example below, we use the font-weight CSS property to specify what weight we want for a given CSS element.

• We use the default weight for body by not specifying the font-weight rule.
• We add font-weight: bold for all titles (h1 - h6). We could also use the font-weight: 700 number syntax here.

You can only specify the weight if we load the font with that weight (See Open+Sans:400,700 in the <link> tag), otherwise the font will not be found and the nearest weight will be used instead.

<!DOCTYPE html>
<html>
<head>
	<title>My website</title>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
	<style>
		body {
			font-family: 'Open Sans', sans-serif;
		}

		h1, h2, h3, h4, h5, h6 {
			font-family: 'Open Sans', sans-serif;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<h1>Bold title in Open Sans font</h1>
	Regular Open Sans text.
</body>
</html>

4. Using @import

The @import rule is a CSS rule used to import other styles into your CSS file or the <style> tag.

As an alternative to embedding fonts with <link>, you also have the option of embedding with @import into your CSS file directly. See the example below:

<!DOCTYPE html>
<html>
<head>
	<title>My website</title>
	<style>
		@import url('https://fonts.googleapis.com/css?family=Open+Sans:400');
		
		body {
			font-family: 'Open Sans', sans-serif;
		}
	</style>
</head>
<body>
	Text in Open Sans font.
</body>
</html>

Who creates the fonts?

Despite the name "Google" Fonts, fonts are generally created by independent designers and organizations from around the world.

Why use them?

Some of the advantages of using fonts through Google Fonts, are

• It's free: No license and no payment for personal or commercial use. Just embed it in your website and start using it.
• Multiplatform: Some operating systems or devices require specific formats. Fortunately, Google Fonts provides support for all major browsers and devices.
• Faster: Thanks to Google's content distribution network, it's generally faster to use Google Fonts than to download and host your own fonts.