Post
Ask Question

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 it 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

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 applied the font to the new class.

Preview

Font on class


Similar Articles