How to transform Google web-fonts to a combined CSS - css

Question

I want to download Google web-fonts in all formats and create a combined CSS to use them anywhere without loading them from Google servers.
I already have a php script that downloads the font files. Need only the CSS now.
As you may know the Google web-font API serves a special CSS depending on the browsers user agent.
I have a few questions about it.
Is it true that Google web-fonts get only serve one font as svg for only OS devices, I noticed this while testing a few fonts (with faked user agent). While for others there are multiple #font-face declarations but with font-weight and font-style different. Am I right to assume Google serves the SVG only for the "regular" version of the fonts not "italic, bold, book ..."
Whats the best way to combine them into one CSS, especially in regards to this combined SVG font.

Answer 1

You are right that Google only serves up the font for your specific user-agent. Getting them all is tricky.
You mentioned you have a PHP script for fetching the different font formats, so you may not need these two options, but I'll list them anyway:
Option 1
This article walks through the process of how to download all the different formats:
http://ijotted.blogspot.com/2012/05/download-eot-ttf-woff-formats-of-font.html
In short, you'll need to use user-agent spoofing to grab all the different formats.
Option 2
Another option would be just to grab the TTF version (since that's easy) and then head over to http://www.fontsquirrel.com/tools/webfont-generator to have them convert/generate all the other versions.
If you end up using this option, it may be useful to know that Joe Maller has put together a full download package to grab all of the TTF font files at once (though it might be a bit out of date).
Serving up with CSS
Once you have all the different versions, use a syntax like this for your CSS. This is from FontSpring's Bulletproof Font-Face Syntax.
#font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
That last line of course depends on whether you have an SVG font file. Which brings us to...
SVG
That first link claims:
While it's true that Google serves the SVG font format on iOS devices running version 4.2 or below, I can confirm that the SVGs are empty or broken. It's therefore true that Google no longer supports devices running iOS versions 4.2 and below. Implies, no SVG font format anymore.
I haven't been able to verify this anywhere else, however I have seen a whole lot of users complaining about SVG issues, fonts not loading... I would be inclined to ignore SVG as an option, and focus on serving up EOT/WOFF/TTF. That seems to be the most solid way of covering your bases.
Update: it appears that fontsquirrel.com can generate an SVG version. So even though Google doesn't provide SVG as a download option, you can still generate it if you really want to.

Answer 2

You can use base64 encoding, but it is about 30% larger than normal files (and I don't know if this url will be parsed every time you write something, so please, check it before you use it).
Or you can download it once and save it in local-browser memory and use it without downloading new version (but you still need to download these files at least one time).
With IE i can't help you. But when you're creating new #font-face rule, you can specify font-weight.
/** #1 **/
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans Extrabold'),
local('OpenSans-Extrabold'),
url(http://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-hnhCUOGz7vYGh680lGh-uXM.woff)
format('woff');
}
/** #2 **/
#font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 300;
src: local('Open Sans Light Italic'),
local('OpenSansLight-Italic'),
url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxh_xHqYgAV9Bl_ZQbYUxnQU.woff)
format('woff');
}
.a {
font-family: 'Open Sans';
font-weight: 300; /** #2 used for <= 500 cos font-weights are 300 and 600 **/
}
.b {
font-family: 'Open Sans';
font-weight: 800; /** #1 used for >= 600 **/
}
Hope it'll help u.