
Self-Hosting Google Web Fonts - majodev
http://ranf.tl/2014/12/23/self-hosting-google-web-fonts/
======
interfacesketch
I self-host fonts for my website, but I only use WOFF. You don't need to use
SVG, TTF or EOT unless you want to provide full support for all browsers. If
you are happy to provide support for recent, modern browsers only, you can
simplify things by just self-hosting WOFF files:

[http://caniuse.com/#feat=woff](http://caniuse.com/#feat=woff)

For browsers that don't support WOFF, just specify a browser-safe font in your
CSS. Those browsers will ignore the Woff declaration and use the browser-safe
font instead.

EDIT: As far as file size goes, I use two font weights on my site: Source Sans
Pro regular and bold. Each font weighs 27kb - so 54kb in total. This is much
less than many Javascript libraries and third-party embeds.

Here's my site (hope it's fine to link) - it's admittedly very simple and has
no Javascript (although Javascript is needed to load the fonts!). In the end
you have to weigh up the balance between page weight and performance for your
own site.

[http://www.interfacesketch.com/](http://www.interfacesketch.com/)

~~~
markdown
> although Javascript is needed to load the fonts!

Why do you feel the need to use JS for font-loading?

~~~
interfacesketch
Sorry, I worded my original post poorly. You need Javascript _enabled_ to load
fonts. For example, in Firefox, the WOFF fonts won't display unless Javascript
is enabled (even if you have no Javascript on the page).

------
tonetheman
You can get all the fonts here...
[https://code.google.com/p/googlefontdirectory/](https://code.google.com/p/googlefontdirectory/)

~~~
majodev
AFAIK there aren't any .woff, .woff2, .svg, .eot in there + no CSS snippets to
use them. Also 2.5GB is quite a big download.

~~~
tonetheman
Yup yup true. Not exactly the same thing. I downloaded them all once to figure
out why one of them was dying on Windows 98... just remembered that when I saw
the article.

------
rahimnathwani
I'm curious - why would you want to host these yourself? Don't your users then
lose the benefit of caching (e.g. if they also visit other sites which use the
same fonts).

~~~
jianzong
It is especially useful in China. Since google is blocked, we can not use
google font apis as well.

~~~
selmnoo
Woah, interesting. Thanks very much for bringing this up, didn't know!

------
kawsper
Doesn't Google do some user-agent sniffing for requests for their webfonts to
optimize for the target platform?

I guess you would lose these optimizations by hosting them yourself.

~~~
majodev
Based on your User-Agent, Google's CSS service only responds with a CSS to
either a .woff, .woff2 .eot, .svg or .ttf font file. For local hosting you'll
need to order these formats in a compatibility sequence, so every browser gets
the one it supports (nice writeup here: [http://css-
tricks.com/snippets/css/using-font-face/](http://css-
tricks.com/snippets/css/using-font-face/)).

As all files are the exact same ones Google is hosting in the wild, I don't
feel like you'll lose any optimizations (which might be the case when using
font generation services like FontSquirrel).

~~~
vbezhenar
That's not correct. I just downloaded the same google font css using different
user agents, one for Windows Google Chrome and one for OS X Google Chrome. CSS
were different, both specified .woff2 format but actual font URLs were
different. And downloaded .woff2 files were different as well. I used Open
Sans font for that test.
[http://pastebin.com/edYbfxzU](http://pastebin.com/edYbfxzU) here's log, you
can try it yourself.

~~~
majodev
Wow, Thanks you for this paste!

I'll look into that and maybe provide some additional fonts on a per
OS/Browser basis to download. The main problem is that it's impossible to have
a static CSS snippet AND provide different files per User-Agent (a javascript
solution might help). So until I've found a solution to this, you are
absolutely right, these optimizations will get lost on local use!

For reference: I'm currently using the following User-Agents for fetching the
font file urls from Google's CSS:
[http://pastebin.com/5SZ1Q6kj](http://pastebin.com/5SZ1Q6kj)

~~~
skwosh
I was going to mention this also. I'm currently working around it with
conditional comments (serving /fonts/ie/9+/index.css, etc).

Anyway, thanks for your service, bookmarked... (I've been thinking of doing
something similar). Good luck with finding a solution to this problem...

------
unicornporn
Or you could host versions (of the fonts in Google Web Fonts) that actually
look good: [http://brick.im/](http://brick.im/)

~~~
pimlottc
In what way do Google Web Fonts not "look good"? That page seems to imply that
Google has modified the fonts in some way but doesn't give any details.

~~~
mgcross
I'm a day late, but I remember Brick from a while back:
[https://github.com/alfredxing/brick](https://github.com/alfredxing/brick)
discussion:
[https://news.ycombinator.com/item?id=7406287](https://news.ycombinator.com/item?id=7406287)

There are examples of Brick v GF, Brick does indeed look better (to me), but
at the expense of file size. The same fonts in the examples are twice the size
of GF.

------
jrochkind1
Are you allowed to do this with fonts you got from Google under their terms of
service?

I always figured they reason they didn't make it easy themselves was cause
they didn't allow it, but never actually checked. I would kind of like to
serve google fonts with cache-forever headers -- google strangely doesn't. I'd
also like to package them up in a web project I'd like to make runnable from
local file system without internet.

~~~
markdown
All Google fonts are free to use, commercially or otherwise. They even provide
a way to download all the fonts.

------
tracker1
One thing I really wish people would "get" is font variants... even font
squirrel messes this one up.. you should set up variants to the same family,
with the appropriate weight and decoration set...

In general I only specify what I will actually be using, but knowing the
difference is helpful... I wish more font packs would do the right thing here.

------
majodev
Attention!

Former downloads only provided fonts with the default Latin subset, this has
been resolved (charsets are selectable). I'm sorry if this causes any
inconvenience (please keep in mind, it's still a prototype)...

[https://google-webfonts-helper.herokuapp.com](https://google-webfonts-
helper.herokuapp.com)

------
jeffehobbs
Great project! This deserves a high profile.

------
prezjordan
Hm, wonder if this somehow is against their TOS?

~~~
Argorak
Google Fonts follows the Google API TOS. As far as I read it: no, as long as
there aren't any further restrictions on the font by third parties.

> d. Data Portability

> Google supports data portability. For as long as you use or store any user
> data that you obtained through the APIs, you agree to enable your users to
> export their equivalent data to other services or applications of their
> choice in a way that's substantially as fast and easy as exporting such data
> from Google products and services, subject to applicable laws, and you agree
> that you will not make that data available to third parties who do not also
> abide by this obligation.

but also

> a. Content Accessible Through our APIs

> Our APIs contain some third party content (such as text, images, videos,
> audio, or software). This content is the sole responsibility of the person
> that makes it available. We may sometimes review content to determine
> whether it is illegal or violates our policies or the Terms, and we may
> remove or refuse to display content. Finally, content accessible through our
> APIs may be subject to intellectual property rights, and, if so, you may not
> use it unless you are licensed to do so by the owner of that content or are
> otherwise permitted by law. Your access to the content provided by the API
> may be restricted, limited, or filtered in accordance with applicable law,
> regulation, and policy.

~~~
delinka
"As far as I read it: no, as long as there aren't any further restrictions on
the font by third parties."

My reading of 5e says the opposite. That 'unless expressly permitted by
content owners' you shouldn't be allowing caching of content provided via
Google APIs.

~~~
Argorak
I think we are arguing the same thing: It's the content owners decision, not
Googles.

Considering that most (all?) fonts on Google Fonts are open (most I checked
use SIL or Apache as license), downloading is most likely allowed.

~~~
delinka
Perhaps we are arguing the same thing ultimately, but it's important to
understand the distinction Google is attempting to make. They're basically
trying to cover themselves by asserting that they are not granting any
additional freedom beyond what the designer intended. Relicensing without
permission is copyright infringement-- Google doesn't want the headache. Their
safest course is to specify that unless you've been given license to do
certain things by the content owner, that Google themselves is not licensing
you to do those things.

Think of it like an affirmation from an open source project licensed under an
MIT or BSD license. Although they might include GPL code from elsewhere,
they'll generally state that they're not relicensing someone else's GPL code
under the less restrictive license.

~~~
Argorak
Yes, we are. Thanks for the writeup.

Probably the biggest issue for the service will be to make sure that licensing
is ensured. (see
[https://news.ycombinator.com/item?id=8802833](https://news.ycombinator.com/item?id=8802833))

------
maus80
You are my hero... Thank you so much!

------
mrottenkolber
Applause!!!! I hate Google Web Fonts for their horrible interface to OPEN
SOURCE FONTS for which they don't offer download links. It should be
prosecuted as a crime. What the hell Google?

~~~
ahoge
> _they don 't offer download links_

1\. Add fonts to your collection.

2\. Click the download button in the upper right corner.

~~~
maus80
I bet you did not even try that :-) Or you would have known..

that it does not offer all formats in one convenient package.

