Smarter ideas worth writing about.

Google Fonts Bower Proxy

While writing an application today a requirement popped up: Remove the external dependency on Google Fonts. For this application I was using Bower as our production dependency manager. So the first thing I thought of was "Hey, lets bower install --save googleFonts:ComicSans." Unfortunately this functionality doesn't exist either as a valid bower endpoint or a repo. Next I thought, maybe Google provides a SCM repo like SVN or GIT with all the fonts in it. No such luck. Then I found this kind soul who has gone through and hosted all of Google's fonts on Github. The problem here was twofold, it did not have the CSS snippet to include the fonts, like
Google's own API provides; and it had every single font. This was less than ideal to pull down a single font.
 
My solution; fire up a quick node server, a microservice if you will, that will proxy Google's API. This small service pulls down the CSS snippet returned by Google's API. It then pulls down allresources defined in that snippet, then replaces their declaration in the CSS with a relative pathed version. Then it slams all these in a zip file and returns it to the original client. Viola! Bower will extract the zip under bower_components and the CSS can be included in the application like any other bower component.

The service can be accessed here: https://google-fonts.azurewebsites.net/

There are instructions for its use, but its incredibly simple:

bower install --save https://google-fonts.azurewebsites.net/googleFonts/openSans?family=Open+Sans

This will add an entry into your browser.json file like:

{
...
    "dependencies": {
...
        "droidSans": "https://google-fonts.azurewebsites.net/googleFonts/openSans?family=Open+Sans",
...
    }
}

You can find the code at https://github.com/CardinalNow/google-fonts-bower-proxy.

Share:

About The Author

Consultant
Rusty is an Enterprise Java consultant and Scrum Master who is passionate about enterprise mobile development.