Google Fonts is a service provided for free by Google that allows access to thousands of fonts. All the available fonts are under Open Source licenses, meaning theyāre free to use for both commercial and non-commercial projects.
Getting started
This article will go over using Google Fonts on a webpage. Below is what a boilerplate web page looks like right now:
And hereās the boilerplate HTML markup:
<!DOCTYPE html>
<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>My web page</title>
</head>
<body>
<h1>Welcome to my website</h1>
</body>
</html>
Pretty boring, huh? Letās spice it up a little with a better font.
Choosing your fonts
Itās now time for us to choose our fonts. Head on over to fonts.google.com and select a font you like by pressing the little (+) (plus) button. Iām going to use Karla. Once youāve picked out your font, expand the drawer on the bottom of the page.
There are two ways to import the font for use. For the first method, copy the code in the code box under the Standard label. Now head on over back to your markup and add a the copied code and a style tag to the head of the document like this.
<!DOCTYPE html>
<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>My web page</title>
<link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
</head>
<body>
<h1>Welcome to my website</h1>
</body>
</html>
Youāll notice from the URL example above that Google Fonts now supports the font-display property! š
If you already have a separate CSS stylesheet, copy the code under the @import label and add it to the top of your stylesheet like so.
@import url('https://fonts.googleapis.com/css?family=Karla&display=swap');
.element {
/* ... */
}
Using the Fonts
Weāve imported our fonts, now itās time to use them. Letās set the body of our HTML markup to use Karla, like so:
<!DOCTYPE html>
<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>My web page</title>
<link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Karla', sans-serif;
}
</style>
</head>
<body>
<h1>Welcome to my website</h1>
</body>
</html>
Now, if we take a look at our web page, it looks like this:
That looks a lot better!
āØ That was easy, wasnāt it? Now you can make your web pages look prettier with the free font hosting offered by Google Fonts! Thanks for reading!
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
About the author
Still looking for an answer?
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
This work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and AI-native businesses
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow ā whether you're running one virtual machine or ten thousand.
Start building today
From GPU-powered inference and Kubernetes to managed databases and storage, get everything you need to build, scale, and deploy intelligent applications.
