Picture

Hi, I'm Boopathi Rajaa.

Hacker, Dancer, Biker, Adventurist

Add your custom fonts to webpage

What do you do if you want to display your text in a webpage in your customized way. It's just simple. Open a image editor, write what you want and then upload it to your webpage. What if you want a dynamic text that changes. It's a little complex solution. You create images of all the characters of the particular font using an image editor, display them accordingly using dynamic languages like php or asp.net providing links to the images and then align them using css(tedious job).

Here is one solution that is much simpler and effective too. That is including the font in your web directory and importing it at the runtime. This is just a css script that will do the work for you. And after this import is done, you can use it in css like any other font say Arial, sans-serif etc....

To Import :
@font-face
{
font-family: 'myStyle';
font-weight: normal;
src: url('fonts/myFont.ttf'); /* The font extension may differ .ttf, .otf etc ... */
}

Usage :

myId , .myClass, myTag

{
font-family: 'myStyle';
}

Notes :

  • The font-weight property lets you set the current imported weight of the font. So that if you have your font's bold style as a separate file, you can import under same name and give that the bold property
  • If your internet connection is slow, then the browser would not display the font until the font-file is loaded. In chrome, the no text appears and in firefox, text appears in default font and when the font is loaded the text changes to the applied font-style.
  • Sorry to say that, this doesnt work in internet explorer. There is another format that is supported by internet explorer. I ll be posting on that later.

Now you can create dynamic text in your own font-style. No more images for using simple font-styles and no more worrying about menu fonts. When you have css to do so much work, why go for images that take so much memory and load time.