How to Use Offline Font in CSS

In CSS we use Google fonts to style our website, but most of the developer wants to use font offline, we can use font offline in CSS by using their @font-face property. There are some following steps to use font offline:

Step1:  Open the following link:

https://fonts.google.com/

Step2: Choose the Font Whatever you like and download it.

Step3:  After completing the download unzip the file and save it in your project folder.

Step4: In the CSS file write the following code:

@font-face {
  font-family: fontfamily; // you can write the name whatever you want
  src: url(foldername/font-name.ttf); // here write the font path and font name with its extension
}
body
{
font-family: fontfamilyname; // font family which you have created in your @font-face property.
}


Example:

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
  font-family: opansans;
  src: url(open-sans.ttf);
}
 
div {
  font-family: opensans;
}
</style>
</head>
<body>
 
<h1>Offline Font in CSS</h1>
 
<p> By Using CSS @font-face property we can use offline font very easily.</p>
 
</body>
</html>

Categories: web designing css

Trending Courses

CodeIgniter

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Advance Digital Marketing

Regular : 6 Months

Fastrack : 3 Months

Crash : 2 Months

React JS

Regular : 45 Days

Fastrack : 20 Days

Crash : 7 Days

Laravel

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Front End Developer

Regular : 7 Month

Fastrack : 4 Month

Crash : 2 Month

Related Blogs

Request For Demo