Welcome to WebmasterWorld Guest from 54.227.82.149

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

     

drooh

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

5+ Year Member



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

lucy24

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

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



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
?

drooh

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

5+ Year Member



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?

robzilla

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

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



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

lucy24

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

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



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.

drooh

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

5+ Year Member



@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!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month