TagCanvas and web fonts
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.
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.