Hi friends in this blog I’m explaining how to use any font of your choice in your web page with CSS3.

Description:

Thousands of fonts are available on the internet today, some are paid some are free to use.
Download the font you want to use on your webpage. Then copy the downloaded fonts to your web server and use them on your webpages using CSS.
We'll use the free ones for this article 

Step to Use the fonts

1.       Download Fonts

2.       Convert them online

3.       Use the style sheet code 

Download Fonts

There are many website where you can download fonts for free.
Here are few website with a huge collection of free as well as paid fonts.

http://www.dafont.com/

http://www.urbanfonts.com/

http://www.1001freefonts.com/

Choose the font you like and download it. 

Convert The Fonts

The downloaded fonts will work on most of the browsers but won't work on IE.
To make the fonts appear on IE we'll have to convert it to a format(eot) that IE understands.

How to Convert

There are many software's available on the internet, most of them paid.
Here's a website where we can convert the TTF font to EOT font for IE for Free!

http://everythingfonts.com/ttf-to-eot

Upload the font you want to convert on this website and then download the converted font.
Notice the font extension before converting was TTF after converting changes to EOT.
Keep both these files in the same folder Fonts.

Css Code

@font-face {
    font-family: 'font-name';
    src: url("folder-name/font");
}

 @font-face {

With this code we will define a new font-name and include the fonts that we have downloaded using src.

src: url("folder-name/font");

The location of the font (in this case the folder named fonts ) 

HTML CODE

<divstyle="width:80%;margin:0auto;border:2pxdashed#b0a9a9;">
    <divclass="name">Mindstick</div>
    <h1>MindStick Software pvt. ltd.</h1>
    
    <p>Research & Development</p>
    <hr/>
    <divclass="emp-name">Product Development</div>
    <divclass="emp-name">Software Development</div>
</div>

CSS CODE

@font-face {
    font-family: 'Led Bus';
    src: url("Font/Led Bus.eot"); /*EOT file for IE*/
}
 
@font-face {
    font-family: 'Led Bus';
    src: url("Font/Led Bus.ttf"); /*TTF file for CSS3 browsers*/
}
 
@font-face {
    font-family: ToxicPowers;
    src: url("Font/ToxicPowers.eot"); /*EOT file for IE*/
}
 
@font-face {
    font-family: ToxicPowers;
    src: url("Font/ToxicPowers.ttf"); /*TTF file for CSS3 browsers*/
}
 
@font-face {
    font-family: TurnUp;
    src: url("Font/TurnUp.eot"); /*EOT file for IE*/
}
 
@font-face {
    font-family: TurnUp;
    src: url("Font/TurnUp.ttf"); /*TTF file for CSS3 browsers*/
}
@font-face {
    font-family: Blazed;
    src: url("Font/Blazed.eot"); /*EOT file for IE*/
}
 
@font-face {
    font-family: Blazed;
    src: url("Font/Blazed.ttf"); /*TTF file for CSS3 browsers*/
}
 
.name {
    font-family:Blazed;
    font-size: 60px;
    color: #56c6d9;
}
 
h1 {
    font-family:'Led Bus';
    font-size: 50px;
    color: #56c6d9;
}
 
p {
    font-family: 'ToxicPowers', georgia, serif;
    font-size: 16px;
    color: #676262;
}
.emp-name {
    font-family: 'TurnUp';
    font-size: 20px;
    color: #191818;
}

 

Output

in my next post i'll explain about CSS3 animated dropdown menu