There are situations where you may require to use special types of fonts for specific pages or parts of a web application. If the font you are using is not available in default fonts, you have to embed it using css. Lets start by downloading the example font pirulen.ttf from http://www.1001freefonts.com.

Step 1 – Copy the font to your project folder.

You can copy the font anywhere inside the project folder. Inside the css folder will be the best place to store font files.

Step 2 – Embed the font in the css file using the following code

 @font-face {
                font-family: "pirulen";
                src: url(pirulen.ttf);
        }

Give the name of the font in the font-family attribute and name of the font file in the src attribute.

Step 3 – Example of using the embedded font in css file

Using the font for every part of your web page.

body{
        font-family: "pirulen";
}

Using the font for specific tag or container.

div{
        font-family: "pirulen";
}

#test_Div{
        font-family: "pirulen";
}