After having entered into the web space as an interaction designer, I wondered why do we restrict ourselves to use the standard lifeless general fonts that are available and supported by all browsers.
Being a designer it becomes stressful to create a design layout with eye catching fonts, only to realize later that these are to be converted as image files for the viewers to see them online. In this process we designers land up in heavy webpages and no SEOs, we are then asked to cut down the size and compromise on the quality, or change the font.
There are many work around for the Search Engines to recognize and pick the letter, but it is still a painful process.
Well, these days are far over, its now after the release of firefox 3.5 that a new inclusion of @font-face can give you splendid results without converting your fonts as image files.
When I was browsing the net to find another work around for the desired fonts to show up on the web, I landed in this helpful article titled "Expand Your Font Palette Using CSS3" now this was great news.
The @font-face selector helps the designer to embed a desired font to the web that can be viewed by all. It allows truetype" (ttf), "opentype" (ttf,otf), "truetype-aat (ttf), "embedded-opentype" (eot) and "scalable-vector-graphic" (svg,svgz). The only other difficulty is to get things working on IE6,7 and 8.
Its easy to use the @font-face selector
Simply type this in your css file -
@font-face {
font-family : "Cheboygen" // Note that this font is not available, not a websafe font
src: url('Location of the font file - specify the path/cheboygen.ttf'); // Note that this is to load the ttf to your server
}
use this to define your font
.cheboygenfont {cheboygen, arial, verdana} // just like you give the other parameters...
and voila ... your firefox, opera 10+, safari .. shows up this font no matter what :) ...
Simple isn't it? but then you have to load this font twice if you want similar results to be seen in your IE ...
Check the link http://randsco.com/index.php/2009/07/04/p680 and stop loading heavy images for your text on the web :)
Being a designer it becomes stressful to create a design layout with eye catching fonts, only to realize later that these are to be converted as image files for the viewers to see them online. In this process we designers land up in heavy webpages and no SEOs, we are then asked to cut down the size and compromise on the quality, or change the font.
There are many work around for the Search Engines to recognize and pick the letter, but it is still a painful process.
Well, these days are far over, its now after the release of firefox 3.5 that a new inclusion of @font-face can give you splendid results without converting your fonts as image files.
When I was browsing the net to find another work around for the desired fonts to show up on the web, I landed in this helpful article titled "Expand Your Font Palette Using CSS3" now this was great news.
The @font-face selector helps the designer to embed a desired font to the web that can be viewed by all. It allows truetype" (ttf), "opentype" (ttf,otf), "truetype-aat (ttf), "embedded-opentype" (eot) and "scalable-vector-graphic" (svg,svgz). The only other difficulty is to get things working on IE6,7 and 8.
Its easy to use the @font-face selector
Simply type this in your css file -
@font-face {
font-family : "Cheboygen" // Note that this font is not available, not a websafe font
src: url('Location of the font file - specify the path/cheboygen.ttf'); // Note that this is to load the ttf to your server
}
use this to define your font
.cheboygenfont {cheboygen, arial, verdana} // just like you give the other parameters...
and voila ... your firefox, opera 10+, safari .. shows up this font no matter what :) ...
Simple isn't it? but then you have to load this font twice if you want similar results to be seen in your IE ...
Check the link http://randsco.com/index.php/2009/07/04/p680 and stop loading heavy images for your text on the web :)
No comments:
Post a Comment