Custom Fonts with Google WebFont Loader

I have recently been working on adding local fonts to my customized version of svg-edit. The idea is to have a font selector with several fonts from my local system. I have been using the recently released Google WebFont Loader API to load font files from my local server into the website. Google has made it easier than ever. (note: Google will collect stats from your website if you use this API, just like they do if you use any of their services.)

The first thing I needed was font files. Not all browsers are alike when using the css @font-face elements. Paul Irish educated me on that one. So I needed different versions of the font file based on the browser. Luckily, Font Squirrel has a Font Face Generator which generates all the necessary files and the style sheet to boot. I thought to myself: “Dang, that was easier than I thought it would be. I think I’ll donate some money to Font Squirrel for developing that awesome app.” Then I didn’t get around to it… maybe tomorrow.

Once you have all the font files and style sheet up on your server, you can instantiate them with the Google WebFont Loader. Why not just include the style sheet? For a couple of reasons: 1) You can’t get rid of FOUT 2) If you are loading multiple fonts (like in a font selector) it would take a long time to load them all up-front (Some of the files are 50k+). For my font selector, I want to be able to load the fonts when the font is selected, then it will be cached on the user’s computer for all future requests.

To keep track of which fonts were loaded (so as not to load them again with WebFont) I created an array with all the font definitions for my selector (Only three to start). I then created the Smm.loadFont function to load the font. The function takes 3 arguments: 1) The font to load 2) [optional] The callback for when the font has finished loading, and 3) [optional] the callback for WHILE the font is loading.

var Smm = {
    fontDirectory: 'css/fonts/',
    imageDirectory: 'css/fonts/font-images/'    
};

Smm.Fonts = {
    BrushScript: {
        cssFile: 'BrushScript.css',
        imageFile: 'brush-script.png',
        loadType: 'custom',
        loaded: false
    },
    CloisterBlackLight: {
        cssFile: 'CloisterBlackLight.css',
        imageFile: 'cloister.png',
        loadType: 'custom',
        loaded: false
    },
    Cooper: {
        cssFile: 'Cooper.css',
        imageFile: 'cooper.png',
        loadType: 'custom',
        loaded: false
    }
};


Smm.loadFont = function(fontFace, active, loading){
    console.log('Loading font: ' + fontFace);
    if(Smm.Fonts[fontFace]['loaded'] === false){
        Smm.Fonts[fontFace]['loaded'] = true;
        
        WebFont.load({
            custom: { 
                families: [fontFace],
                urls: [Smm.fontDirectory+Smm.Fonts[fontFace]['cssFile']] 
            },
            loading: loading,
            active: active
        });
    }
    else {
        active();
    }
};

I added the imageFile setting to each font so that a picture would be used instead of text. This allows the user to see a preview of the font without downloading it. The last thing I did, was create the HTML for the font loader.

UPDATE: I integrated the drop-down into svg-edit. Check out a demo here: svg-edit with custom font selector

UPDATE: Get the source code with installation details from my github repository