Hacker News new | comments | show | ask | jobs | submit login
Self-Hosting Google Web Fonts (ranf.tl)
100 points by majodev on Dec 27, 2014 | hide | past | web | favorite | 54 comments



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

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/


Thanks. WOFF format now has enough traction that everything except Opera Mini supports it. Originally, Apple's IOS only supported fonts in SVG, of all things. Then they added TTF in 2010, and WOFF in 2012. Unless you need to support something pre-2012 and have it look pretty there, WOFF is enough.

If you need to convert a font for which you have the rights, there's Font Squirrel. (http://www.fontsquirrel.com/tools/webfont-generator). That tool can convert a font to all the popular formats. Throw in SVG if you need to support old iPhones.

You don't really need Google Fonts as a service any more. That was a workaround. Just host on your own site in WOFF.


Cool, I did not know that .woff is supported in every major browser. I will include a .woff only CSS snippet in the service ASAP.

EDIT: Done.


I don't know. I've had some real issues with WOFF even on modern browsers (Chrome, Mac), where for example it won't render when you don't have an external monitor plugged in (really strange, I know). The only solution I found was using SVG instead.


I'm glad you included a link. Those templates are great! Thanks for offering them for free.


Pretty useful info, thank you, never realized one could get away with just WOFF nowadays.


> although Javascript is needed to load the fonts!

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


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).


You can get all the fonts here... https://code.google.com/p/googlefontdirectory/


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.


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.


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).


No tracking, easier development when without internet, less external dependencies.

You can, for example, use Google with a local fallback, for better reliability. (their CDN will fail at some time)


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


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


Yeah, and if we use fonts.useso.com is slow outside of China.


Primarily to respect the privacy of your site's visitors.

It also removes a dependency on a 3rd party source.


I am an edge case, but one where big CDNs are blocked, especially Google. Where the cache doesn't work, often nor do the entire pages they're supposed to serve; this does not apply only to fonts.


On my company's internal intranet site I try to self host everything because our company internet connection is very unreliable.


I suspect the caching benefit is minimal, the vast majority of visitors won't have the fonts in cache. I'm basing my suspicion off the research done into jQuery cache hit success rates at http://www.stevesouders.com/blog/2013/03/18/http-archive-jqu...

Web performance is complicated though and all the pros and cons interact in non-intuitive ways. A comparison of self-hosted, inexpensive CDN hosted, and original Google hosted may provide some performance surprises.


It certainly isn't worth the extra DNS roundtrips, especially on 3G and lower connections.


There is a small benefit when cacheing fairly small font files. And that's only if the sites your user visits have the same fonts as you.

If you're using anything outside of the, say, top 20 most popular fonts - users aren't going to get any benefit from the caching.


A few weeks ago suddenly a bunch of fonts changed messing up the layout of a site of a customer. I've also seen periodic slowdowns because the fonts would not load or load very slowly.

In general keeping the number of dependencies down is a good thing to do.


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.


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/).

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).


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 here's log, you can try it yourself.


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


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...


I believe Google strips the font hinting if you're not on Windows, as it's not needed/used by other systems.


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


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.


I'm a day late, but I remember Brick from a while back: https://github.com/alfredxing/brick discussion: 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.


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.


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


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.


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


Great project! This deserves a high profile.


Hm, wonder if this somehow is against their TOS?


I'm really not sure. However, I'm piping are the exact same fonts Google is serving in their hosted CSS-service - in a similar fashion like Clemens Lang's Bash script (https://neverpanic.de/blog/2014/03/19/downloading-google-web...) is doing that.

The only thing that bothers me is the generation of the zip file, but streaming these files without any caching on the server would be very expensive (especially on a single free heroku dynamo).


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.


"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.


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.


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.


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)


Hm, well then I will have to request the font files fetched from their hosted CSS, compress them and pipe this output (the resulting zip) without any caching on the server.

This may result in a higher latency, but might be more safe in regards to their ToS.


My personal opinion is to leave things as they are until you hear from Google. Simply be aware of the possible interpretations of the ToS. I do believe Argorak has the correct sentiment: that it's ultimately up to the individual font designer/cretor.

Your temporary caching, to me, seems fine. I read the ToS as saying that permitting your end user to obtain permanent copies might be disallowed ... at the discretion of the font designers. To be absolutely certain, you should check each font's license. Considering the fonts aren't Google's to license, I doubt you'll hear from them.


THX for this response! I'll look into that.

Interestingly, Google's own Fonts API which I'm using with my service, doesn't provide any information about the underlying license of each font (I previously wanted to include that info in the UI as well).


Seems that this may indeed run afoul of section 5e here: https://developers.google.com/terms/


This isn't about their API ToS, it's about copyright. The fonts are distributed under free licenses and therefore fair game.


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


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?


You can download all the OPEN SOURCE FONTS via this open-source-friendly interface:

https://code.google.com/p/googlefontdirectory/


> they don't offer download links

1. Add fonts to your collection.

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


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

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




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: