Menu
I've been spending a few evenings investigating the best way to implement @font-face with todays modern browsers. I am a full time web/system developer with a background as a graphic designer I find the opportunities and possibilites with web design becoming more and more interesting. So, I made some testing and would like to hear if anyone has advices, any better ideas or inputs on this. My testing scenario looks like this.
I tested with ALOT of different online tools and applications but in the end I boiled this down to one online service and one application.
I used a font that was shipped with my Mac, Tamil Sangam MN and Tamil Sangam MN Bold, both came as open type, .otf.
This is a good online tool, it's very good. There are a few different modes and I've used the Basic and Optimal. The output of my .otf file was svg, ttf, eot and woff.
Regular
Bold
First thing I noticed with the optimal fonts are that they are considerably much smaller than the basic variants ~ 260 KB!
Regular
Bold
This tool can do so much more than just juggling fonts for the web. It can convert several formats between each other; like opentype, true type, web fonts, post script and so on. The result is overall very high quality the files are so large, almost twice the size of FontSquirrels Basic versions and over 7 times bigger than FontSquirrels Optimal version.
Regular
Bold
It puzzled me a bit in the start that the actual order in the font list mattered. Then I discovered that some takes the first format that it finds compatible rather than sticking with the format that is optimal - and it sucks. After some laborations I found that this is the optimal way to format your css (note the order of the file types | important!).
@font-face {
font-family: 'TamilSangam';
src: url('.eot');
src: url('.svg') format('svg'),
url('.eot?#iefix') format('embedded-opentype'),
url('.woff') format('woff'),
url('.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I did mark the best version with a *
Firefox MAC (15.0.1)
Firefox Windows (15.0.1)
Safari Mac (6.0)
Chrome Mac (21.0)
Chrome Windows (21.0)
Internet Explorer (9.0)
Firefox MAC (15.0.1)
Firefox Windows (15.0.1)
Safari Mac (6.0)
Chrome Mac (21.0)
Chrome Windows (21.0)
Internet Explorer (9.0)
I usually organize my webfonts in the following pattern, <webfonts> / <conversion source> / <conversion method> / <fonts>
/* Regular */
@font-face {
font-family: 'TamilSangam';
src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn.eot');
src: url('webfonts/fontxchange/TamilSangamMN.svg#TamilSangamMN') format('svg'),
url('webfonts/fontsquirrel/optimal/tamil_sangam_mn.eot?#iefix') format('embedded-opentype'),
url('webfonts/fontxchange/TamilSangamMN.woff') format('woff'),
url('webfonts/fontxchange/TamilSangamMN.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* Bold */
@font-face {
font-family: 'TamilSangam';
src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.eot');
src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.svg#tamil_sangam_mnbold') format('svg'),
url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.eot?#iefix') format('embedded-opentype'),
url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.woff') format('woff'),
url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
Graphical overview of the result (fullsize at http://i.stack.imgur.com/atb98.png)
There isn't one single tool out there that will deliver fonts that render nice on the Mac and Windows in all browsers. You must experiment and test on each font. The methodology posted above is just a simple way and suggestion how to test and experiment with @font-face's.
Is there anything you think I could change in my methods or implementation, is there any application or service that I missed?
All the best / T
271
You can add src: local('ò?'), which looks for local font with this name, forcing browser to ignore local fonts if they happen to have the same name as your custom font. You can also use this inversely to restrict custom fonts from downloading. see mobile support
I generally see the ?#iefix line second after the standard .eot src, though I can't say I have ever needed it, nor know if specific positioning is required (apart from the .eot being listed first).
If you are looking for more control with the fonts in the scenario where fonts fail to load, or dealing with the FOUC in IE, I have a jQuery plugin which will let you hide fonts while they are loading, and allow you to alter the font size on fail so your fallback font doesn't destroy your layout. How to know if a font (@font-face) has already been loaded?
Additionally, IE6-8 can have issues with some font's .eot file. This can be fixed by either (full guide here):
Seems to only relate to IE and FF. All other browsers (only latest versions tested) don't have problems.
CORS are a common problem with fonts and occur when you are loading fonts from another domain or hostname. This includes specifying your site with a www or not. The @font-face code needs to be relatively referenced, as does the CSS file. You will also have issues if defining a <base> tag in your html. If this isn't possible, or if you don't want to worry about CORS, then you'll need to place the following code in an .htaccess file in your font directory:
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
404 issues on font serving may be caused by incorrect MIME definitions, see more here: Mime type for WOFF fonts?
Mobile support is pretty bad. Android doesn't properly support it until 4.0, and Windows Mobile, as far as I am aware doesn't support it at all. I am investigating any work around or solutions for this. Best I have so far is to use How to know if a font (@font-face) has already been loaded? to display a picture of the text on font load failure. This really only works for site titles and icons, otherwise it's a horribly poor work around, bad for SEO and bad UX.
See @font-face support.
Additionally, Android 2.2 - x.x.x versions will fail if your @font-face uses local(), which is also used as a fix for IE. Multiple stylesheets may be needed if you want to cover all your bases. See more here: https://stackoverflow.com/a/4520467/1455709
Chrome won't use the SVG font if you're including the #fontName in the url. It'll also use WOFF before SVG - and doesn't do a good job rendering it. This is probably the reason why everyone sooks about crappy font rendering in Chrome... To overcome this is an additional @font-face declaration is required:
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'myFont';
src: url('fonts/myFont.svg') format('svg');
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
