Self-Hosting Google Web Fonts

Let’s get this straight: The effort to host Google web fonts on your own server is immense! First of all you need to download all .eot, .woff, .woff2, .ttf and .svg files, then copy them onto your server and finally paste a CSS snippet.

Sounds easy? Well it could be, if Google would actually provide any direct links to download these files and a customized CSS for self-hosting them. To fix this problem without using font generation services like Font Squirrel, I decided to publish a little service called google-webfonts-helper.

Update 2016-10-29

Star

This weekend project has now reached close to 1500 stars and was mentioned in various blogs (e.g. Milan Aryal), newsletters and articles (e.g T3N [german]). Seems like the project fills a need.

As far as I can tell, its API gets even directly used by some companies, though this is still hosted on a single free Heroku dyno for about ~2 years now! So big THX to Heroku, you are awesome!

Update 2015-01-12

Just for reference: Before creating this service I’ve used an awesome bash script by Clemens Lang to download Google fonts in all formats. So Kudos to him, my service builds upon his idea!

Update 2015-01-09

Your generated archive only includes required files based on selected styles, formats and charsets. 4-steps instruction. A special Thank you goes to the 212 stargazers, you are awesome!

Update 2015-01-02

UI improvements, CSS code highlighting, step by step instructions.

Update 2014-12-30

Font subsets (e.g. latin, latin-ext, cyrillic, …) are now customizable.

Update 2014-12-29

Seriously, I have not expected so much popularity: 169 stargazers. Thank you so much!

Update 2014-12-27

Wow, this project has gone quite popular after submitting it to Hackernews! 33 stargazers and 35 comments (and rank 7 in the news section at peak time). Thank you!

Example: Self-host Open Sans in 4 easy steps!

The service uses Google’s font API to retrieve a list of all available web fonts, fetches links to the .eot, .woff, .woff2, .ttf and .svg files by parsing their hosted CSS files (and faking the User-Agent to get them). It downloads all font formats and generates a customized archive with all your selected styles, formats and charsets. In combination with the CSS snippet (whose folder prefix can be customized) you should be ready to self-host your font immediately. Here’s how this looks like currently:

Internally, I’m using the (M)EAN stack (without MongoDB) as I really needed some practice with Angular and Express. Restful services are great and I can recommend anyone starting up a small project like this to take a look at the yeoman angular-fullstack generator. Without prior knowledge, I came up with a working prototype in less than 5 hours! Freaking productive work flow.

Please leave comments on Hackernews if you have any suggestions and take a look at the code on GitHub.