How to Achieve Cross Browser @font-face Support

are there newer methods for achieving this?

are there newer methods for achieving this?

use cufon

i believe cufon is image-based fonts. but i need a solution which loads actual fonts into the webpage. @fontface seems like the only viable option, so i don’t see how this article is outdated at all. seems state-of-the-art.

question: the demo that comes with the font-kit i generated with squirrel works great on my webserver, but fails on Firefox when integrated into my website (same server). still works in IE/Chrome.

why would WOF /TTF files fail on Firefox when integrated into my website? any ideas?

above firefox issue resolved.

firefox does not allow remotely-hosted fonts by default (i believe there’s a way to enable it at the browser, but that’s no help for web-dev).

to host font files remotely for firefox, there are two solutions (see paul irish “font-face gotchas”)

—embed font directly in css (use “base64” in fontsquirrel to get this. drawback: causes css bloat.)

—or, put .htaccess in remote font directory, granting access to your site domain. for mine to work (site hosted on yola sitebuilder), i had to use wildcard * in htaccess:

<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*" 
</IfModule>
</FilesMatch>

i strongly recommend anyone using this method read paul irish’s “font-face gotchas” and other similar articles.

for example, it’s recommended to include some extra css to achieve your desired bold and italics.

Thanks for the well laid out post. Back when Mozilla published their big hooplah over web fonts they made it out to be some super complex process where every browser had their own format and tons of CSS to sift through. Reading this blog post though it makes a hell of a lot more sense and is tons simpler. Really appreciated!

cr08 said
Thanks for the well laid out post. Back when Mozilla published their big hooplah over web fonts they made it out to be some super complex process where every browser had their own format and tons of CSS to sift through. Reading this blog post though it makes a hell of a lot more sense and is tons simpler. Really appreciated!

P.S: Gravedigger.