Embedding Cross Browser Custom Fonts
Embedding cross browser custom fonts and @font face.
There are lot of methods to get fancy fonts on a web page - sIFR 2.0, sIFR 3, sIFR Lite, WP sIFR, P+C DTR, Cufón, WP-Cufon, Typeface.js, FLIR, SIIR, DTR, PIR, FontJazz, WordPress Plug-Ins, AnyFont, Font Burner, @font-face. Overview, pros and contras on smashingmagazine.com/2009/10/22/rich-typography-on-the-web-techniques-and-tools/ by Cameron Chapman.
Sample @font-face
You should see the phrase 'XBAND Rough Regular' in a quite different looking font face here below:
XBAND Rough Regular
- Tutorial - blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/ by Devon Govett
- Choose free fonts - fontex.org or smashingmagazine.com/2009/08/07/beautiful-new-free-fonts-for-your-designs/
- Convert - Font Squirrel has made this simple - fontsquirrel.com/fontface/generator
- Upload .eot, .svg, and .ttf files, add CSS.
SVG for Chrome, TTF for Firefox and Safari, EOT for IE. Opera is cold dead meat.
In October 2009 4% of visitors on one of my sites used Opera. No one of them used Opera 10. These 1000 visitors do not see beautyfonts.
January 2010. Browser K-Meleon that uses Geko engine, doesn't show beautyfonts on this page.
@font-face method adds as minimum 100 Kb weight to web page, if just skimmy Unicode basic latin subset is used.
In case the fancy fonts are meant for titles or slogan only, it would be wiser stick simply to graphics...
CSS3
@font-face{
font-family:'XBANDRoughRegular';
src:url('XBAND-Rough.eot');
src:local('XBAND Rough Regular'),
local('☺'),
url('XBAND-Rough.ttf') format('truetype'),
url('XBAND-Rough.svg#XBANDRough') format('svg');/* ID #XBANDRough is found inside .svg file */
}
h4{
font-family:'XBANDRoughRegular',sans-serif;
font-size:32px;
}
Custom fonts April 2010
Time has passed fast. Meanwhile almost all users of Opera have climbed above version 10. Smiley trick and WOFF have got invented. Font squirrel has got even better.
Applying custom fonts to web pages is simple. And a good news is that they work on 99% of browsers.
Just upload your font, or shoose from their fonts, and receive a @font-face font kit bundled with sample files.
@font-face kit you get contains-
- demo.html (how to apply custom fonts)
- foo-webfont.eot (IE browsers, Internet Explorer was the first browser to support @font-face, going all the way back to IE4)
- foo-webfont.svg (@font-face in Google Chrome, Safari for iPhone, and the Opera browser)
- foo-webfont.ttf or foo-webfont.otf (Firefox, Opera, Safari, Chrome)
- foo-webfont.woff (all browsers in future probably)
- stylesheet.css (font-face css)
Then just copy/paste your custom fonts, and you've done.
Custom font problem
Font, font-face firefox problem, custom fonts firefox.
Fonts are right in IE and other browsers, except Firefox. The reason - Firefox is unable fetch font files when an absolute path is given in the style sheet.
To get the font-face right for Firefox, instead of absolute path a relative one has to be used when declaring @font-face.
In stylesheet, in all selectors @font-face{} change all patterns url('http://images.my-sample-domain.com/graphics/new/fonts/ to this - url('/graphics/redesign/fonts/, or whatever is the actual relative path.
2009, 2010, 2011.
Web Development - XHTML CSS JavaScript jQuery.