We all want to create an attractive website but many of us don't understand how to properly change or use a CSS Custom Font. So, we will learn how to add various fonts to a web page.
Download Fonts
The first step is to download the font. There are many web sites that provide you thousands of fonts for free (with a commercial licence). I am giving you some links. (I get no profit from sharing these links with you. You can find more by searching Google. Read the licence carefully before using commercially.)
Download the font that you like.
Convert the Font
Why do we need to convert the font (from .ttf to .eot)?
The answer is simple; actually most browsers support .ttf font files so if we want to see the same font then we need to convert it to a .eot file. I am providing you a link by which you can convert a .ttf to a .eot.
A free online .ttf to .eot converter is at: http://www.kirsle.net/wizards/ttf2eot.cgi.
Here you need to just upload the font file (.ttf) and convert it to .eot. After converting, download your .eot font file.
Applying Fonts to Web Page
HTML Document Structure
<body>
<p class="new">C-SHARP CORNER</p>
</body>
I have created a page in HTML and add a class .new for applying fonts that I downloaded earlier.
Preview
![Applying Fonts to Web Page]()
CSS
@font-face
{
font-family:Anagram;
src:url("Anagram-webfont.ttf");/*Supported by Major Browsers*/
}
@font-face
{
font-family:Anagram;
src:url("Anagram-webfont.eot");/*Supported by I.E.*/
}
.new
{
font-family:Anagram;
font-size:100px;
}
Here, using @font-face we can set the source and name to our font.
In the code above I have added both a .ttf and .eot file so that if a user visits my page using IE or another browser then the same font will appear to him on the web page.
Finally I apply the font on the .new class.
Preview
![apply the font on class]()