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.