Create Cool Webpage Using CSS3 Custom Fonts

Introduction

 
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 license). 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 license 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
  1. <body>  
  2. <p class="new">C-SHARP CORNER</p>  
  3. </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
  1. @font-face {  
  2.     font-family: Anagram;  
  3.     srcurl("Anagram-webfont.ttf");  
  4.     /*Supported by Major Browsers*/  
  5. }  
  6.   
  7. @font-face {  
  8.     font-family: Anagram;  
  9.     srcurl("Anagram-webfont.eot");  
  10.     /*Supported by I.E.*/  
  11. }  
  12.   
  13. .new {  
  14.     font-family: Anagram;  
  15.     font-size100px;  
  16. }
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 to the .new class.
 
Preview
 
apply the font on class


Similar Articles