Google WebFonts without dialing Google

Published: Fri 18 January 2013

If you don’t want to be sending a notice to Google every time your site is visited - due to the fact that all webfonts are downloaded each time from Google - you can do this.

Go to the Google WebFonts page for your font. Add it to your “Collection”. Download your collection locally to a folder with the name of your font and unzip it.

Go to the URL in your CSS for the webfont (in my case Metrophobiac). It will return CSS that looks like this:

            @font-face {
            font-family: 'Metrophobic';
            font-style: normal;
            font-weight: 400;
            src: local('Metrophobic'),
            url(http://themes.googleusercontent.com/static/fonts/metrophobic/v3/0IZPA9DbzKXnGZABsAivT4bN6UDyHWBl620a-IRfuBk.woff)
            format('woff');
            }

Copy that out to a file (in my case metro.css) in the folder you created above.

Note the URL in the above CSS ending in woff. Download that file into the same folder and change the URL in the CSS above so that:

            url(http://themes.googleusercontent.com/static/fonts/metrophobic/v3/0IZPA9DbzKXnGZABsAivT4bN6UDyHWBl620a-IRfuBk.woff)

Becomes:

            url('Metrophobiac/0IZPA9DbzKXnGZABsAivT4bN6UDyHWBl620a-IRfuBk.woff')

Note the single quotes!

Now scp that to the server and put it in the directory containing your CSS.

In all CSS in which you have the web font declared, change the import line so that it points to that folder. In my case:

            @import url(http://fonts.googleapis.com/css?family=Metrophobic);

Becomes:

            @import url('Metrophobiac/metro.css');

Note the single quotes!

Bye Google.

Affiliated