March 18th, 2019 
Nilesh Chaurasia CSS Font Face
CSS Font Face Property is used to apply custom fonts. The text style or Font Face can be taken from either a google provider server or your own web server (where your website is hosted server).
Example 1 – CSS Custom Font Import Example
<!DOCTYPE html>
<html>
<head>
<style>
@font-face
{
font-family: 'Aclonica';
font-style: normal;
font-weight: 400;
src: url('fonts/aclonica-v9-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Aclonica Regular'), local('Aclonica-Regular'),
url('fonts/aclonica-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/aclonica-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/aclonica-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
url('fonts/aclonica-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/aclonica-v9-latin-regular.svg#Aclonica') format('svg'); /* Legacy iOS */
}
.aclonica
{
font-family: 'Aclonica';
}
</style>
</head>
<body>
<h3>Example of font-face</h3>
<p class="aclonica">Lorem ipsum dolor sit amet,quis nostrud exercitation aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum pariatur.</p>
</body>
</html>
Here the above code shows that how can you import the new font-face to your text.
Example 2 – CSS Font Face Example
<!DOCTYPE html>
<html>
<head>
<style>
@font-face
{
font-family: 'Henny Penny';
font-style: normal;
font-weight: 400;
src: url('fonts/henny-penny-v6-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Henny Penny'), local('HennyPenny-Regular'),
url('fonts/henny-penny-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/henny-penny-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/henny-penny-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
url('fonts/henny-penny-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/henny-penny-v6-latin-regular.svg#HennyPenny') format('svg'); /* Legacy iOS */
}
.henny
{
font-family: 'Henny Penny';
}
</style>
</head>
<body>
<h3>Example of font-family monospace</h3>
<p class="henny">Lorem ipsum dolor sit amet,quis nostrud exercitation aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum pariatur.</p>
</body>
</html>
This is the another example of font-face.
How you can test?
Step 1. First you have to open the above link, which is given inside the Link. Step 2.Than you have to select the font-face which you want and click on it. Than download this font-face. Step 3.After download you have to extract the file into the same folder where you have saved your HTML file. Step 4.Make sure that you have to follow the folder structure of your website. It means that the font files URL is in proper order.
You can apply costum fonts, by linking the font files from the google server. It means that, there is no need to download the font files to your web server.
Example 3 – CSS Font Import
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei');
.zcool
{
font-family: 'ZCOOL XiaoWei', serif;
}
</style>
</head>
<body>
<h3>Example of font-family monospace</h3>
<p class="zcool">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p>
</body>
</html>
This is the another example of font-face. Where you do not have to download font file in your web server.
How you can test?
Step 1. First you have to open the above link, which is given inside the Link. Step 2.Than you have to select the font-face which you want and click on it. Than click on the minus(+) icon. Step 3.After clicking on the plus icon the font is slected, now their is a black bar shown “Family Selected”. Than click on the minus icon which is at the top right position. Step 4.After clicking on the minus icon from the new opened tab, you can copy link tag or import code and use in your web page.
Posted in 
Tags: 
Thanks for your marvelous posting! I really enjoyed reading it, you’re a great author.I will always bookmark your blog and will eventually come back in the foreseeable future. I want to encourage that you continue your great posts, have a nice weekend!