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 worksThe 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
to the window
onload event handler, I've added it to the
WebFontConfig.active callback handler that is triggered when the
fonts are loaded:
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
holds the options that are passed to TagCanvas, and the
variable is used by the Google web font loader, which is the block of code at
the bottom of the listing.
option and call
TagCanvas.Start() again. The fonts are all loaded
at once in this example, so there is no need to call
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.