TagCanvas and web fonts

« Return to TagCanvas page

TagCanvas does support the use of web fonts but the way that the canvas deals with them means that the TagCanvas script must be run after the fonts have been loaded by the browser.

Below is an example I created with the release of TagCanvas 1.17 to show that using web fonts is possible - I've added it here to make it easier to find.

Web fonts example

The cloud below is a list of web font names that I have chosen from Google Web Fonts. I selected these fonts because they are all quite different from one another and from the standard list of fonts, so it should be easy to see them working.

Example web fonts canvas

Niconne

Click on a font name to change the font used by the cloud. The name of the currently selected font is shown in the caption under the canvas, and will update when you choose another font.

How it works

The important point to note about using web fonts with TagCanvas is that the font must be loaded before TagCanvas is started. If the font is not loaded when TagCanvas starts, you will either end up with a cloud of small, blank tags, or tags rendered in the browser's default font, depending on the browser.

Because I'm using the Google Web Fonts loader, it is quite easy to know when the fonts are loaded. Instead of adding my TagCanvas.Start(...) to the window onload event handler, I've added it to the WebFontConfig.active callback handler that is triggered when the fonts are loaded:

var options = {
    textFont: 'Niconne, sans-serif',
    maxSpeed: 0.02,
    fadeIn: 800,
    textColour: '#900',
    textHeight: 25,
    outlineMethod: 'colour',
    outlineColour: '#039',
    outlineOffset: 0,
    depth: 0.97,
    minBrightness: 0.2,
    wheelZoom: false,
    reverse: true,
    shadowBlur: 2, shuffleTags: true,
    shadowOffset: [1,1],
    stretchX: 1.7
  },
  WebFontConfig = {
    google: {
      families: [
        'Nosifer::latin',
        'Niconne::latin',
        'Erica+One::latin',
        'Audiowide::latin',
        'Oswald::latin',
        'Allerta+Stencil::latin',
        'Bangers::latin',
        'Bonbon::latin',
        'Boogaloo::latin',
        'Covered+By+Your+Grace::latin'
      ]
    },
    active: function() {
      TagCanvas.Start('fontCanvas', 'gwftags', options)
    }
  };
 
// use the Google web font loader:
(function() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();

I've cleaned the code up a bit here to make it more readable, but this is how the cloud above is initially started. The options variable holds the options that are passed to TagCanvas, and the WebFontConfig variable is used by the Google web font loader, which is the block of code at the bottom of the listing.

The tags in the cloud use a Javascript function to change the textFont option and call TagCanvas.Start() again. The fonts are all loaded at once in this example, so there is no need to call TagCanvas.Start() from the web fonts callback when changing font.

If you prefer to use Typekit for your web fonts, that has a similar event callback mechanism that you should use to start TagCanvas when the fonts have loaded.

« Back to top of page Drag control »