Welcome to WebmasterWorld Guest from 54.145.55.135

Forum Moderators: open

Message Too Old, No Replies

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)

Preferred Member

10+ Year Member

joined:June 19, 2006
posts: 476
votes: 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)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13218
votes: 348


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.

Does
public_html/woff/directory (I assume the space is a typo)
resolve to
www.example.com/woff/directory
?
7:22 pm on Mar 22, 2012 (gmt 0)

Preferred Member

10+ Year Member

joined:June 19, 2006
posts: 476
votes: 0


Sorry for that, its

coveredByYourGrace.woff is stored in

public_html/woff/

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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:1144
votes: 114


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)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13218
votes: 348


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)

Preferred Member

10+ Year Member

joined:June 19, 2006
posts: 476
votes: 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

THANKS!