Use custom fonts to webpage with CSS

In this article, we will learn how to use custom fonts to webpage with CSS? Google fonts can be used to improve the appearance of the website.
Submitted by Abhishek Pathak, on October 27, 2017

Fonts play an important role in creating an impression for a website. According to a study, the webpage with better fonts are more likely to retain audience trust than the ones that don't use custom fonts. While good web fonts are expensive, there are also free library of fonts that can be used on web pages to improve the appearance of the website.

Using the Google fonts library is a good option. It contains many popular fonts that are available for free and are easy to add in your projects. Simply link the font file and use it in your CSS. We can add the custom fonts using multiple methods, but the only recommended one is the following.

Get the link of the font. Let's take an example of "Roboto" font from Google Fonts. Paste this link in the head tag of your HTML file just above the CSS file, so that CSS can recognize the font file.

Code - HTML

<html>
	<head>
		<title>Custom Font</title>
		<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
		<link href="style.css" rel="stylesheet">
	</head>

	... body content
</html>

After adding this link in the HTML file, we can now access this font in our webpage. Using the CSS's font-family property we can specify this new font along with other fallback fonts. Suppose if link doesn't load, then CSS can use the fallback fonts.

Here is an example,

Code - CSS

h1 {
	font-family: 'Roboto', sans-serif;
}

This sets the 'Roboto' font for heading element. If the font fails to load, CSS will change the font to sans-serif. Here is an example that uses the custom fonts in action. Notice the change in readability and appearance of the content.

HTML with CSS

<!DOCTYPE html>
<html>
	<head>
		<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
		<title>Custom fonts in CSS</title>
		<style>
		.custom-font {
			font-family: 'Roboto', sans-serif;
		}
		</style>
	</head>
	<body>

	<h1>Default font</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde voluptate, possimus quis id, excepturi nihil sit dicta, vitae itaque nesciunt, esse! A cumque esse neque, doloribus nulla. Fuga atque facere voluptatibus possimus, maxime iusto iste, ducimus omnis perferendis, et tempora nostrum placeat quibusdam explicabo accusantium eum ut? Quis ratione, repellendus!</p>
		<br><br>
		<h1 class="custom-font">Roboto font</h1>
		<p class="custom-font">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quaerat, reprehenderit, a asperiores quae blanditiis veniam eum excepturi dolores rerum. Repellat minus repellendus beatae minima praesentium, dolores quae exercitationem nam saepe corporis earum esse, labore, rerum voluptatum veniam magni qui! Quos quaerat atque laborum sit iste, blanditiis natus placeat fuga?</p>
	</body>
</html>

Output

how to use custome fonts to webpage with CSS?

In this code, we apply the font using font-family only to elements with custom-font class. You will notice the difference in readability and appearance of both the fonts.

DEMO

Using custom fonts not only improves user experience, but it also provides a trust and uniqueness to your webpage. Hope you like the article. Do you use custom fonts? Share your thoughts in the comments below.

CSS Tutorial & Examples »

Change the perspective of an element in CSS

Flip an image element using CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples