Embedding Fonts Different Methods


If your a front end web developer you might have received a design of a website that has some uncommon font. Normally fonts like Arial, Times New Roman are commonly present in all browsers/Operating systems, that websites designed with those fonts are rendered more or less same in all browsers. But for websites that has custom fonts or fonts that are not available in a normal users computer the web page will get rendered differently depending on the availability of fonts in the client computer or device.

Some really artisitic and creative web designs requires us to use the specific font the website was designed with. So how to do this? Let the user download the fonts required to view the website properly? hmmm not practical… Develop the entire website in Flash? hmmm seo nightmare :-/

Method to embed fonts on a website so that it may be rendered properly at the client.

Method – Embedding the font files in the website. Using @font-face

What you need,

.ttf or .otf font file. these will work on firefox and other modern browsers.

.eot file for internet explorer -> you can convert .ttf files to .eot using online font file converters like http://fontface.codeandmore.com/ and http://www.kirsle.net/wizards/ttf2eot.cgi

after you get those two files put them in your website directory and at the top of your css file add the following code to define the font-face

/* custom fonts */

@font-face {
font-family: gillsans; /* this could be any name but for clarity use the font name */
src: url(“fonts/gillsans.eot”) /* path of EOT file for IE */
}

@font-face {
font-family: gillsans;
src: url(“fonts/gillsans.ttf”) /* path of  TTF file for CSS3 browsers */
}

Make sure to put the .eot file code first.

Then when you want to apply the font just use like following,

p {

font-family: gillsans; /* font family should be what you defined earlier */

}

This method will work on IE and other browsers but is sometimes difficult due to convert difficulties of font files from .ttf and .otf to .eot format.

 

Advertisements

2 thoughts on “Embedding Fonts Different Methods

  1. Manuel

    I have a question for you. I am a beginner web developer trying to make my own site, and I am trying to get a custom font onto my site but no success. I’m wondering if there is something, some kind of code that I am missing. I am using Dreamweaver, and I’ve tried the code you put up. Do you have any recommendations?

    Reply
    1. surendias Post author

      did you include the converted fonts in your websites root folder under /fonts/ as i have suggested in my post? Please make sure the font files are present before adding the code to the .css file. Let me know if this clarify’s your question. Sorry it took this long to reply.

      Reply

Let me know what you think .. :)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s