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 engaging in programming tasks, we just need to incorporate a specific stylesheet link into our HTML file and then specify the desired font family in the CSS style.
To begin utilizing the Google font API, the initial step involves including a stylesheet link to request the specific web font of your choice.
<link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Font+Name">
- Subsequently, we have the option to customize the appearance of an element using the preferred web font, whether through a style sheet or inline styling.
.css-selector {
font-family: 'Font Name', serif;
}
Or,
<div style = "font-family: 'Font Name', serif;">Your text</div>
When defining a web font in CSS, it is crucial to always include a fallback web-safe font to prevent any unforeseen issues. By appending a generic font name like sans-serif or serif at the end of the font list, it ensures that the browser has a default option to display when necessary.
Using @import
We have the option to bring in the font family from a web font provider like Google fonts. This needs to be inserted within the <style> tag.
@import url('https://fonts.googleapis.com/css?family=Lobster');
How to specify styles and font-families in a stylesheet URL
To view the compilation of fonts, simply click on the link below:
https://fonts.google.com/
We need to begin with the URL provided by the Google Fonts API to identify the URL utilized in our stylesheet link.
https://fonts.googleapis.com/css
Next, we need to include the family= URL parameter, specifying one or multiple font family names and styles.
For instance, if we want to fetch the Roboto typeface, we can achieve this in the following manner:
https://fonts.googleapis.com/css?family=Roboto
Note: If there is any space in the font family name, replace it with a plus sign (+).
Suppose we need to make a request for the Open Sans font, the process can be described as follows:
https://fonts.googleapis.com/css?family=Open+Sans
When requesting multiple font families, ensure that each name is distinct and separated by the pipe (|) symbol. For instance -
https://fonts.googleapis.com/css?family=Roboto|Inconsolata|Open+Sans
Let's explore the utilization of Google fonts in CSS through practical illustrations.
Example
<html>
<head>
<link href= 'https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' />
<style>
h1, p, h2 {
font-family: Roboto;
}
h1, h2{
color: red;
}
p{
color: blue;
}
</style>
</head>
<body>
<center>
<h1> Hello World </h1>
<h2> font-family: Roboto; </h2>
<p> Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial 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
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 C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial 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
Example
In this instance, we are utilizing the font family called Chelsea Market which contains a space, hence we are substituting this space with the plus (+) symbol.
<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 C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial 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
Example
In this instance, we are employing various font family names that are delimited by the pipe (|) symbol.
<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 C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial 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 C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial 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 C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial 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