Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

Using FONTFACE in HTML / Unicode and Non-Unicode Fonts in HTML

0.00/5 (No votes)
1 Oct 2013CPOL 13.5K   47  
Using external fonts in HTML.

Introduction

This article describes how to use FontFace in HTML document. Even the fonts are not installed on the client's PC, Unicode and non-Unicode text will be rendered properly.

Background 

Basic knowledge of CSS, HTML is enough. And fonts with different format are needed, e.g., *.eot , *.svg, *.woff, *.ttf. These fonts can be automatically generated from HERE.

Using the code  

First of all create a CSS file with FONTFACE. I have shown below.... Here I am using "akrutidevpriya" font-family.

CSS
@font-face
{
    font-family: 'akrutidevpriya';
    src: url('apriya-n-webfont.eot');
    src: url('apriya-n-webfont.eot?#iefix') format('embedded-opentype'),
    url('apriya-n-webfont.woff') format('woff'),
    url('apriya-n-webfont.ttf') format('truetype'),
    url('apriya-n-webfont.svg#akrutidevpriyanormal') format('svg');
    font-weight: normal;
    font-style: normal;
} 

Now link this CSS File with HTML file. Just copy and paste the following line in your HTML: 

XML
<link rel="stylesheet" href="styles/MyStyleheet.css" type="text/css" charset="utf-8" />

Feel free to clear any queries.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)