CSS Custom Fonts – How to use them


To totally unlock this section you need to Log-in


Login
Thousand's 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 (Cascading Style Sheets).

Steps to Use the fonts

We'll follow these steps to apply the fonts to your webpage.

  • Download Fonts
  • Convert them (TTF to EOT format)
  • Use the Stylesheet Code
  • Use Anywhere
  • 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.

  • dafont.com
  • urbanfonts.com
  • 1001freefonts.com
  • Choose the font you like and download it.

    Convert the font

    We can convert easily a TTF to EOT (Internet Explorer) format by using a small utility called ttf2eot. This little utility should convert almost any TTF font type to a new EOT font file (that will be embedded to a site in same way as TTF).

    To use it you'll have to give it 2 parameters, as showed in the following example:

    C:\>ttf2eot.exe c:\windows\fonts\arial.ttf c:\output.eot
    

    After you have generated the new EOT file you'll can upload your font on your web server (or hosted web server) and begin using it. You'll find the ttf2eot program at the bottom of this article too.

    Uploading

    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.

    The CSS Code

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

    Explanation

    @font-face { : with this code we will define a new font-name and include the fonts that we have downloaded using src (source).

    font-family:font-name; : here any name can be assigned to the font.

    src: url(folder-name/font); : the location of the font (in this case the folder named fonts...)

    The HTML Code

    Lets change the fonts inside a div with id change. Here's the div element with some text.

    <div id=change>
    Apply new font on this text.
    </div>

    The CSS Code

    Now to change the font of the text inside the div element with id change, we'll have to define the new fonts and use them with font-family property.

    We'll have to define the new font twice.

    Once for IE (Internet Explorer)and once for other CSS Browsers.

    Suppose we downloaded the font Rockfont, then we will have two fonts: one will have an extension TTF (rockfont.ttf) and the other EOT (rockfont.eot).

    @font-face {
    font-family:rockfont;
    src: url(fonts/rockfont.eot); /* EOT file for IE */
    }

    @font-face {
    font-family:rockfont;
    src: url(fonts/rockfont.ttf); /* TTF file for CSS3 browsers */
    }

    #change{
    font-family:rockfont;
    }

    Explanation

    Line 1 & Line 6 › @font-face { : used to define new font family.

    Line 2 & Line 7 › font-family:rockfont; : font name is assigned here (you can use any name here).

    Line 3 › src: url(fonts/rockfont.eot); : location of the font file with respect to this html file. Notice the extension eot. This is for IE.

    Line 8 › src: url(fonts/rockfont.ttf); :l ocation of the font file with respect to this html file. Notice the extension ttf. This is for all the browsers.

    Line 11 › #change{ ; : the id of the div.

    Line 12 › font-family:rockfont; : newly created font-family rockfont which is going to be assigned to the div with id change. All the text inside this div will have the same rockfont font.
    [wpfilebase tag="file" id=119 /]