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
font-family: ‘Fontname’ ;
src: url(//:) format(“No-IE-404”),
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/ fontname. 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…