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

• Download source - 331.7 KB

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.

@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: 

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

Feel free to clear any queries.