CSS Tutorial
CSS Properties
CSS Advance
CSS Design
CSS Questions
Miscellaneous
CSS MCQ
- css-mcq
Interview Questions
- css-interview-questions

next → ← prev

How to use Google fonts in CSS?

It is an important aspect of any web design to choose the right font for the webpage. The use of Google fonts is advantageous because we get elegant fonts for our website. The Google fonts API makes it easier and quicker for everyone to use web-fonts. These fonts have been tested on various browser configurations.

Instead of doing any programming, we simply have to add a special stylesheet link to our HTML document, then refers to the font family of our choice in the CSS style.

There are two steps to start using the Google font API that are as follows:

First, we have to add a stylesheet link for requesting the desired web font.

<link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Font+Name">

Then we can style an element with the desired web font, either in a stylesheet or by inline style.

.css-selector {
font-family: 'Font Name', serif;
}

Or,

<div style = "font-family: 'Font Name', serif;">Your text</div>

It is to be noted that when specifying a web font in CSS style, we should always mention at least one fallback web-safe font for avoiding unexpected behaviors. We can add the generic font name such as sans-serif or serif to the end of the list so that the browser will use it as the default font when required.

Using @import

We can import the font family from the web font service such as Google fonts. It is to be placed in the

Hello World

font-family: Roboto;

Hi, Welcome to the tutorialsinfo.com. This site is developed so that students may learn computer science related technologies easily. The tutorialsinfo.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.

Output

How to use Google fonts in CSS

Example - Using @import rule

<html>

<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Lobster');
h1, h2{
color: red;
}
#div1{
font-family: Lobster;
font-size: 20px;
}
p{
color: blue;
}
</style>
</head>


<body>
<center>
<h1> Hello World </h1>
<div id ="div1">
<h2> font-family: Lobster; </h2>
<p> Hi, Welcome to the tutorialsinfo.com. This site is developed so that students may learn computer science related technologies easily. The tutorialsinfo.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better. </p>
</div>
</center>
</body>

</html>

Output

How to use Google fonts in CSS

Example

In this example, we are using the font family name Chelsea Market where there is a space, so we are replacing this space with the plus (+) sign.

<html>

<head>
<link href= 'https://fonts.googleapis.com/css?family=Chelsea+Market' rel='stylesheet' />
<style>
h1, p, h2 {
font-family: Chelsea Market;
}
h1, h2{
color: red;
}
p{
color: blue;
}
</style>
</head>


<body>
<center>
<h1>Hello World</h1>
<h2>font-family: Chelsea Market;</h2>
<p> Hi, Welcome to the tutorialsinfo.com. This site is developed so that students may learn computer science related technologies easily. The tutorialsinfo.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.</p>
</center>
</body>

</html>

Output

How to use Google fonts in CSS

Example

In this example, we are using the multiple font family names that are separated by the pipe (|) character.

<html>

<head>
<link href= 'https://fonts.googleapis.com/css?family=Lobster|Great+Vibes|Satisfy|Inconsolata|Open+Sans' rel='stylesheet' />
<style>

h1, h2{
color: red;
}
#div1{
font-family: Great Vibes;
}
#div2{
font-family: Inconsolata;
}
#div3{
font-family: Satisfy;
}
div{
font-size: 20px;
}
p{
color: blue;
}
</style>
</head>


<body>
<center>
<h1>Hello World</h1>
<div id ="div1">
<h2>font-family: Great Vibes;</h2>
<p> Hi, Welcome to the tutorialsinfo.com. This site is developed so that students may learn computer science related technologies easily. The tutorialsinfo.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.</p>
</div>
<div id ="div2">
<h2>font-family: Inconsolata;</h2>
<p> Hi, Welcome to the tutorialsinfo.com. This site is developed so that students may learn computer science related technologies easily. The tutorialsinfo.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.</p>
</div>

<div id ="div3">
<h2>font-family: Satisfy;</h2>
<p> Hi, Welcome to the tutorialsinfo.com. This site is developed so that students may learn computer science related technologies easily. The tutorialsinfo.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.</p>
</div>

</center>
</body>

</html>

Output

How to use Google fonts in CSS

Next TopicHow to wrap text in CSS

← prev next →

Hot Tutorials

Contact US

Email:[email protected]

How to use Google fonts in CSS

10/30