How to use Google Fonts in CSS With Detailed Easy-to-use Examples!

How To Use Google Fonts In CSS

Given how crucial it is for any web design to select the ideal font for the webpage, people frequently ask how to use Google fonts in CSS. The benefit of using Google fonts is that they provide a classy look for your website. Using Google fonts in CSS is possible. The Google Fonts API simplifies and accelerates the use of web fonts for everyone. Numerous browser configurations have been used to test these fonts.

Instead of writing any code, you just need to include a special stylesheet link in your HTML document, which will then reference the font family of your choice in the CSS style.

To use the Google font API, you must first complete the two steps listed below:

  • You must first add a stylesheet link to request the web font of your choice.
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=GoogleFontName">
  • Using a stylesheet or inline style, we can style an element with the desired web font.
css-selector {  
font-family: 'Font Name', Oswald;  
}  
  
Or,  
  
<div style = "font-family: 'Font Name', Oswald;">Your text</div>

A minimum of one backup web-safe font should always be used when defining a web font in a CSS style. The general font name, such as sans-serif or serif, might be included at the end of the list.

Using @import To Add Google Fonts.

The font family can be imported from a web font service like Google Fonts. The <style> tag is where it should be placed.

@import url('https://fonts.googleapis.com/css?family=Lato');

How To Define Styles And Font-families In A Stylesheet URL

Click on this link to view the list of Google fonts:

We start with the Google Fonts API-based URL to determine the URL used in our style sheet link.

  1. https://fonts.googleapis.com/css  

Using one or more family names and styles, we must add the family= URL parameter.

For example, if we need to request the Roboto font, then it can be done as follows:

  1. https://fonts.googleapis.com/css?family=Roboto  

Remember to replace any space in the font family name with a plus sign (+). For example, if we have to request the font fuzzy bubbles; it should be written as follows:

  1. https://fonts.googleapis.com/css?family=fuzzy+bubbles  

The names should be kept apart from the pipe (|) character when requesting multiple font families. For example -

  1. https://fonts.googleapis.com/css?family=Oswald|Inconsolata|fuzzy+bubbles  

Let's examine some examples to help you comprehend how Google fonts are used in CSS.

Example 1

<html>  
  
<head>  
<link href= 'https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' />  
<style>  
h1, p, h2 {  
font-family: Oswald;  
}  
h1, h2{  
color: green;  
}  
p{  
color: yellow;  
}  
</style>  
</head>  
  
  
<body>  
<center>  
<h1> Hello World </h1>  
<h2> font-family: Oswald; </h2>  
<p> Hi, Welcome to Hubtolearn.com. This site is developed so students can learn computer science-related technologies easily. Hubtolearn.com is powered by Techstack solutions limited and provides easy and in-depth tutorials on various technologies. Perfection may be far-fetched, but professionalism is possible. We aim to create professionals around the globe. We are a team of professionals producing professionals. </p>  
</center>  
</body>  
  
</html> 

Example 2 - Using the @import to add fonts

<html>  
  
<head>  
<style>  
@import url('https://fonts.googleapis.com/css?family=Lato');  
h1, h2{  
color: green;  
}  
#div1{  
font-family: Lato;  
font-size: 20px;  
}  
p{  
color: yellow;  
}  
</style>  
</head>  
  
  
<body>  
<center>  
<h1> Hello World </h1>  
<div id ="div1">  
<h2> font-family: Lato; </h2>  
<p> Hi, Welcome to Hubtolearn.com. This site is developed so students can learn computer science-related technologies easily. Hubtolearn.com is powered by Techstack solutions limited and provides easy and in-depth tutorials on various technologies. Perfection may be far-fetched, but professionalism is possible. We aim to create professionals around the globe. We are a team of professionals producing professionals. </p>  
</div>  
</center>  
</body>  
  
</html>  

Example 3

This example uses the font family name Roboto mono and replaces the space with a plus (+).

<html>  
  
<head>  
<link href= 'https://fonts.googleapis.com/css?family=Roboto+mono' rel='stylesheet' />  
<style>  
h1, p, h2 {  
font-family: Roboto mono;  
}  
h1, h2{  
color: green;  
}  
p{  
color: yellow;  
}  
</style>  
</head>  
  
  
<body>  
<center>  
<h1>Hello World</h1>  
<h2>font-family: Roboto mono;</h2>  
<p> Hi, Welcome to Hubtolearn.com. This site is developed so students can learn computer science-related technologies easily. Hubtolearn.com is powered by Techstack solutions limited and provides easy and in-depth tutorials on various technologies. Perfection may be far-fetched, but professionalism is possible. We aim to create professionals around the globe. We are a team of professionals producing professionals.  </p>  
</center>  
</body>  
  
</html>  

Example 4

In this example, the pipe (|) character denotes the separation between multiple font family names.

<html>  
  
<head>  
<link href= 'https://fonts.googleapis.com/css?family=Lato|Great+Vibes|Satisfy|Inconsolata|fuzzy+bubbles' rel='stylesheet' />  
<style>  
  
h1, h2{  
color: green;  
}  
#div1{  
font-family: Great Vibes;  
}  
#div2{  
font-family: Inconsolata;  
}  
#div3{  
font-family: Satisfy;  
}  
div{  
font-size: 20px;  
}  
p{  
color: yellow;  
}  
</style>  
</head>  
  
  
<body>  
<center>  
<h1>Hello World</h1>  
<div id ="div1">  
<h2>font-family: Great Vibes;</h2>  
<p> Hi, Welcome to Hubtolearn.com. This site is developed so students can learn computer science-related technologies easily. Hubtolearn.com is powered by Techstack solutions limited and provides easy and in-depth tutorials on various technologies. Perfection may be far-fetched, but professionalism is possible. We aim to create professionals around the globe. We are a team of professionals producing professionals. </p>  
</div>  
<div id ="div2">  
<h2>font-family: Inconsolata;</h2>  
<p> Hi, Welcome to Hubtolearn.com. This site is developed so students can learn computer science-related technologies easily. Hubtolearn.com is powered by Techstack solutions limited and provides easy and in-depth tutorials on various technologies. Perfection may be far-fetched, but professionalism is possible. We aim to create professionals around the globe. We are a team of professionals producing professionals. </p>  
</div>  
  
<div id ="div3">  
<h2>font-family: Satisfy;</h2>  
<p> Hi, Welcome to Hubtolearn.com. This site is developed so students can learn computer science-related technologies easily. Hubtolearn.com is powered by Techstack solutions limited and provides easy and in-depth tutorials on various technologies. Perfection may be far-fetched, but professionalism is possible. We aim to create professionals around the globe. We are a team of professionals producing professionals. </p>  
</div>  
  
</center>  
</body>  
  
</html> 

To learn more about CSS, visit our CSS Tutorial Page.