Clint Berry

Full-stack Web Developer

Wannabe Entrepreneur

Custom Fonts with Google WebFont Loader

Posted on 14 Jul 2010 in jQuery | 6 comments

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

I am a full-stack web developer that is passionate about start-ups.

6 comments

  1. Gagen / September 6th, 2010 1:34

    Awesome post man. Thanks!

  2. Sid Abels / September 10th, 2010 11:40

    Great Post. Thanks for sharing!!

  3. Bob / March 1st, 2012 5:24

    This is great, but cannot figure out one step, where Exactly, to place this code????

    Add the following JavaScript snippet into svg-editor.html after all other JavaScript files in the head section:

    google.load("webfont", "1"); $(function(){ Smm.init(‘tool_font_family’); });

    after all other JavaScript files in the head section

    Where EXACTLY is that, I have tried numerous locations in the svg-edit.html and cannot find “after all the code in the head section”

    Is it between:

    and

    ??

    Thanks for your help.

  4. Thilo / March 1st, 2012 15:22

    Great extension, works fine with svg-edit 2.5.1. Did you tried is with the last trunk-version 2.6? I tried it, but den font selector drops down behind the canvas, so the listed fonts aren’t shown. Any idea?

  5. Clint / April 10th, 2012 15:58

    I haven’t updated for 2.6 yet, sorry :-)

  6. Clint / April 10th, 2012 15:59

    Bob, sorry for the really late response. Did you figure it out? If not, feel free to email me at clint “at” system-11 .com

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>