Using Google Fonts in Your Projects
If you’ve ever looked at a website and thought, “Wow, that text looks great,” there’s a good chance special fonts were used. Google Fonts is a free collection of fonts you can easily add to your website or project.
In this article, you’ll learn:
- What Google Fonts is and why it’s useful
- How to choose and add a font to a simple web page
- How to style headings and paragraphs with different fonts
- How to experiment and customize fonts on your own
No coding experience is required. We’ll go slowly, explain each step, and you can copy-paste the code as you follow along.
What is Google Fonts?
Google Fonts is a free online library of hundreds of fonts. You can use them on websites, in designs, and often in other tools that support web fonts.
Why it’s great for beginners:
- Free to use
- Easy to add with just one line of code
- Works on most devices without extra setup
You don’t need to download or install anything on your computer to use Google Fonts on a website. You just tell your page where to load the font from.
Step 1: Visit Google Fonts and Pick a Font
- Go to https://fonts.google.com in your browser.
- Browse the fonts or use the search bar at the top.
- Click on any font you like to see more details.
For our first example, we’ll use a popular and simple font called Roboto.
On the Roboto page, you’ll see:
- A preview of how the font looks
- Different styles (like Regular, Bold, Italic)
- A "Get font" or similar option
When you click to get the font, Google Fonts shows you some code that looks like this:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
This is the line we’ll copy into our web page. It tells the browser: “Please load the Roboto font from Google Fonts.”
Step 2: Create a Simple HTML Page
Let’s make a very simple web page to test our font.
- Open a text editor (like Notepad on Windows, TextEdit on Mac in plain text mode, or any code editor).
- Create a new file and save it as
index.htmlon your desktop.
Paste this basic HTML code into the file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Google Font</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first page using Google Fonts.</p>
</body>
</html>
Now double-click the index.html file to open it in your web browser.
You should see a simple page with a heading and a paragraph, using your browser’s default font.
This is our starting point. Next, we’ll connect Google Fonts.
Step 3: Add a Google Font to Your Page
We’ll now add the Roboto font to the page using the <link> line from Google Fonts.
Update the <head> section of your HTML file so it looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Google Font</title>
<!-- Load the Roboto font from Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
<!-- Add some basic styles to use the font -->
<style>
body {
font-family: 'Roboto', sans-serif; /* Use Roboto for all page text */
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first page using Google Fonts.</p>
</body>
</html>
What’s happening here?
- The
<link>line tells the browser to download the Roboto font from Google Fonts. - The
<style>block contains CSS (Cascading Style Sheets), which is the language used to style web pages. font-family: 'Roboto', sans-serif;says: “Use Roboto if available, otherwise use a generic sans-serif font.”
Now save the file and refresh the page in your browser. You should notice that the text looks different – cleaner and more modern.
That means your Google Font is working. Nice job!
Step 4: Use Different Fonts for Headings and Body Text
You don’t have to use just one font. Many websites use one font for headings and another font for body text (paragraphs).
Let’s pick a second font for our headings. We’ll use Lora, a nice serif font.
4.1 Add a second font link
Go to https://fonts.google.com and find Lora.
Copy the <link> line for Lora.
It will look similar to this:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora&display=swap">
Now update your HTML <head> to include both fonts:
<head>
<meta charset="UTF-8">
<title>My First Google Font</title>
<!-- Load Roboto and Lora from Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora&display=swap">
<style>
/* Use Roboto for general page text */
body {
font-family: 'Roboto', sans-serif;
}
/* Use Lora just for headings */
h1, h2, h3 {
font-family: 'Lora', serif;
}
</style>
</head>
4.2 What this does
bodyuses Roboto, so paragraphs and normal text use that font.h1, h2, h3use Lora, so headings look different and stand out.
If you refresh your page now, your heading should look more elegant, while the paragraph stays simple and easy to read.
You’ve just combined two fonts like a pro.
Step 5: Adjust Font Size and Weight
Fonts are more than just their shape. You can also change font size and font weight (how bold it looks).
Let’s add a little more text and styling.
Update your <body> so it looks like this:
<body>
<h1>Welcome to My Page</h1>
<h2>Learning Google Fonts</h2>
<p>
This is my first page using Google Fonts.
I am using Roboto for most text and Lora for the headings.
</p>
<p>
Changing fonts can make your website easier to read and more fun to look at.
</p>
</body>
Now let’s update the <style> section to adjust size and weight:
<style>
body {
font-family: 'Roboto', sans-serif;
font-size: 16px; /* Base size for normal text */
line-height: 1.5; /* Extra space between lines for readability */
margin: 20px; /* Add space around the page content */
}
h1 {
font-family: 'Lora', serif;
font-size: 32px; /* Bigger font for main heading */
font-weight: 700; /* Make it bold */
}
h2 {
font-family: 'Lora', serif;
font-size: 24px; /* Slightly smaller than h1 */
font-weight: 400; /* Normal weight */
}
p {
margin-bottom: 10px; /* Space between paragraphs */
}
</style>
What you should see
- The main heading (
h1) is large and bold. - The subheading (
h2) is smaller and not as bold. - Paragraphs are easy to read with good spacing.
You’ve now used Google Fonts together with basic CSS to control how your text looks.
Try It Yourself: Experiment with Another Font
Now it’s your turn to play. Here’s a simple exercise to build your confidence.
- Go back to https://fonts.google.com.
- Choose any new font you like (for example, Pacifico or Montserrat).
- Copy the
<link>line for that font. - Paste it into your
<head>section, below the other font links. - In your
<style>section, pick an element to change, likeh2orp, and updatefont-familyto use your new font.
For example, if you chose Montserrat:
h2 {
font-family: 'Montserrat', sans-serif; /* Use your new font for h2 */
font-size: 24px;
font-weight: 600;
}
Save your file and refresh your browser. Did the look of your headings or text change? If yes, you’ve successfully added and used another Google Font.
Remember: it’s completely normal to make mistakes while experimenting. If something looks broken, just undo your last change or re-copy the code from this article.
Quick Recap and What’s Next
You’ve just taken a big step into web design. Here’s what you learned:
- What Google Fonts is and how it helps you use beautiful fonts for free.
- How to add a Google Font to your page using a simple
<link>in the<head>section. - How to apply fonts with CSS using the
font-familyproperty. - How to use multiple fonts for headings and body text.
- How to adjust size and weight to make your text easier to read and more attractive.
From here, you can:
- Explore more fonts on Google Fonts
- Try different combinations (one font for headings, one for body)
- Learn more CSS properties like color, alignment, and spacing
You don’t need to understand everything at once. Each small experiment – even just changing a font – is progress.
Keep practicing, play with different fonts, and soon you’ll be able to make pages that both look and feel professional.
