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>