homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Google Font, hosting woff file on server, dont use Google CDN
Google Font, hosting woff file on server, dont use Google CDN

 6:07 pm on Mar 21, 2012 (gmt 0)

I would like to use Google Font without linking to the google CDN. I would like to host the .woff file on the same server. From my testing the only works in certain browsers which are
IE9 and above
Firefox 11 and above
Safari and Chrom (all versions)

Here is what Im doing, wondering if there would be a better way to do this and that would work for IE7, IE8 and firefox 4-10.

On index.php page

<link rel="stylesheet" type="text/css" href="/woff/woff.css" />

contents of woff.css

@media screen {
@font-face {
font-family: 'Covered By Your Grace';
font-style: normal;
font-weight: normal;
src: local('Covered By Your Grace'), local('CoveredByYourGrace'), url('/woff/coveredByYourGrace.woff') format('woff');

also, coveredByYourGrace.woff is stored in

public_html/woff/ directory

Please do not respond with questions or comments of why I dont want to use the CDN, thank you



 9:22 pm on Mar 21, 2012 (gmt 0)

Is it the location or the .woff format itself that isn't working? Just when browsers had caught up to font embedding using the normal .ttf instead of the MS-specific .otf, they throw this .woff thing at you.

public_html/woff/directory (I assume the space is a typo)
resolve to


 7:22 pm on Mar 22, 2012 (gmt 0)

Sorry for that, its

coveredByYourGrace.woff is stored in


With my code as stated above, it works only in IE9, Firefox 11+, Chrome & Safari

However, with the stock google code using their CDN it works on all browsers

The only thing I can think of is how their server is handling the woff format, perhaps Apache is serving differently?


 8:13 pm on Mar 22, 2012 (gmt 0)

They dynamically alter the stylesheet served based on the user's browser (it's an API). See these technical considerations [developers.google.com].


 8:28 pm on Mar 22, 2012 (gmt 0)

Google may be converting the woff format into ttf for backward compatibility. That's a wild guess; there may be fine-print documentation somewhere that explains it.


 8:54 pm on Mar 22, 2012 (gmt 0)

@robzilla, thank you for that tip! I followed the trail using ie8 and found that google spits this out

@font-face {
font-family: 'Jolly Lodger';
font-style: normal;
font-weight: 400;
src: url('http://themes.googleusercontent.com/static/fonts/jollylodger/v1/RX8HnkBgaEKQSHQyP9itiXZ2MAKAc2x4R1uOSeegc5U.eot');
src: local('Jolly Lodger'), local('JollyLodger'), url('http://themes.googleusercontent.com/static/fonts/jollylodger/v1/RX8HnkBgaEKQSHQyP9itiXZ2MAKAc2x4R1uOSeegc5U.eot') format('embedded-opentype'), url('http://themes.googleusercontent.com/static/fonts/jollylodger/v1/RX8HnkBgaEKQSHQyP9itiXhCUOGz7vYGh680lGh-uXM.woff') format('woff');

quite different from chrome, safari


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved