Wednesday, 30 April 2014

Google fonts not displaying on HTML5 canvas

I have been developing a web page and needed to use google fonts on canvas with elements added dynamically via js (jquery and kineticjs).

But they weren't logging as the browser gets the .woff files last no matter what you do.

There are a lot of suggestions how to organize your css files, when to include them and so on, none of these tackled the problem for me.
Working solution was actually simple.

Make sure that you execute all canvas related js code after the page has stopped loading, so either enclose it in:
window.onload=function(){
YOUR CODE HERE
};
or for jquery:
$(window).load(function() {
YOUR CODE HERE
});

No comments:

Post a Comment

Real Time Web Analytics