Learn how to quickly add Google Fonts to your website with the HTML <link> element and a few lines of CSS.
This quick typography and CSS tutorial will show you the fastest way I know to add Google fonts to your website. If you don’t have a website to experiment with right now you can use this pen as your typography playground.
If you have a text editor on your local machine, create an index.html and add this HTML markup (it’s the same as the CodePen example):
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<h1>Headline</h1>
<h2>Subheading</h2>
<h3>Subheading</h3>
<h4>Subheading</h4>
<h5>Subheading</h5>
<h6>Subheading</h6>
<p>
Paragraph: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam
non modi odio, esse blanditiis omnis rerum ducimus fugit ea nihil
accusantium molestiae doloremque dolorum magni laudantium autem nulla amet
ullam!
</p>
</body>
</html>Alright, we’re ready to add a font family (or typeface, it doesn’t matter what you call it on the web) to our glorious website.
Go to fonts.google.com.
On the front page, there is a list of popular fonts. You can also search for a specific font specimen if you already know what you’re looking for.
To make things simple, let’s pick the first font family on the front page, Roboto.
Click on the red + button in the top right corner.
On the bottom right side of your screen, you should see a little black bar pop up, saying 1 Family Selected.
Click on the bar to open the customization window.
Quick video:
Now under the Standard tab, copy the HTML link element that contains your Roboto font source:
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">Paste the link element inside the <head> of your HTML document, so the head now looks like this:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet"
/>
</head>Now in your CSS stylesheet, add the following CSS rule-set:
body {
font-family: "Roboto", sans-serif;
}Refer to the CodePen from earlier if you’re in doubt.
You’ve just added the Roboto font to your website!
Beware that by default you only add one of many font’s from a font family — the regular font-weight (numeric value: 400), also known as “roman style”.
If you want more weights and styles, go back to Google Fonts and click on the Customize tab, and select the other font variations you need. This will update your URL source link. Copy the new link and paste it inside your <link> element’s src.
If you chose Roboto Bold, and want to use bold to emphasize a part of your text, e.g. your headings, you would do it like this in CSS:
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
}Happy text formatting!
