CSS Custom Font Face Import

Ad Banner Image

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.

CSS Font Face
Fig.1 – CSS Font Face Example

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.

CSS Font Import
Fig.2 – Font Import Example

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.

CSS Custom Font
Fig.3 – CSS Custom Font

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.

Sponsor Banner
You can leave a response, or trackback from your own site.

One Response to “CSS Custom Font Face Import”

  1. Erasmo Mhoon says:

    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!

Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress