Webfont for Websites

I was working on a web project where I wanted to embed the special fonts not the standard fonts which comes with the Operating System. When I did the POC I was having font installed on my local and everything worked fine.

But I was sure about the upcoming problem, as this is a website where I want to use this special font and even if I install the font on the Server that will not help as end user will not see the same font on the browser window until they have same font installed on their machine.

then I thought about some other options and did some Google and read about the Web Fonts and that looks like a perfect solution for the problem which I have. Generally browser will not support the special fonts until those are installed on your machine or in the form of web fonts.

Now to reference these webfonts we need @font-face feature of CSS. this will allow us to reference any of the web font type. Here are the steps to implement the special font format on web:
1) First of all get the .TTF or .OTF format of the font which you want to use for the website

2) Now convert the .TTF format to the following format types – .eot, .woff, .otf and .svg

3) To convert these .TTF format to other web font format you can use the online converters. These converts are really helpful. here are few converters which I have used when I was working with the font formats Onlinefontconverter,Freefontconverter, Fontconverter and TTF2EOT
Even for .eot conversion it is good to use the online converter instead of Microsoft WEFT. That tool is no good looks like a overhead. But choice is yours 🙂

4) Now to support all the browsers we need to get all the above mentioned font format, once you have converted ttf to these format create a CSS and add the code mention below in that, I have created a fonts folder in my project folder and kept all the font files in that

 -----------------------------------------------------------------------------
 CSS CODE
 -----------------------------------------------------------------------------
 @font-face
 {
 font-family: "Fontname";
 src: url('fonts/FontFilename.eot');
 font-weight: normal;
 font-style: normal;
 }

@font-face
 {
 font-family: 'Fontname' ;
 src: url(//:) format("No-IE-404"),
 url('fonts/FontFilename-webfont.woff') format('woff'),
 url('fonts/Fontname.otf') format('opentype'),
 url('fonts/FontFilename-webfont.svg#intlt') format('svg'),
 url('fonts/FontFilename.ttf') format('truetype'),
 url('fonts/Fontname.eot') format('embedded-opentype');
 font-weight: normal;
 font-style: normal;
 }
 -----------------------------------------------------------------------------

After making all these changes it worked fine in all the browser like IE 7, Chrome , Firefox but issue i faced in opera and I noticed opera was always having a conflict with IE font file/ font name. So to fix it I have used two .eot files. one for the IE CSS style code and other for the NON-IE CSS style code. Then it worked perfectly fine.

We have used in this CSS @face-font twice because one @font-face works with IE and other for all the NON-IE browsers till IE 8 Microsoft browser supports only .eot format so we have to have separate code to handle it.

I hope this article help you…

Advertisements

Leave a Reply

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

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: