Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

At present I load my font for my game in with @font-face

For instance:

@font-face {
    font-family: 'Orbitron';
    src: url('res/orbitron-medium.ttf');

and then reference it throughout my JS implementation as such:

ctx.font = "12pt Orbitron";

where ctx is my 2d context from the canvas.

However, I notice a certain lag time while the font is downloaded to the user. Is there a way I can use a default font until it is loaded in?

Edit -

I'll expand the question, because I hadn't taken the first comment into account. What would the proper method of handling this be in the case that a user has disabled custom fonts?

share|improve this question
Be aware that the browser may never download it. Many people I know have their browsers configured to only use a fixed set of fonts, and at fixed sizes. – user744 Jan 10 '11 at 19:23
@Joe - good point, question updated – espais Jan 11 '11 at 11:20
up vote 2 down vote accepted

I am not sure if it is possible to detect this, the browser will download the font when it see's the CSS. You could draw the text using a default font, then use something like this to detect if the font has loaded outside your canvas. If it is detected as having loaded, you could then refresh your canvas.

Edit; "What would the proper method of handling this be in the case that a user has disabled custom fonts" - You would have to let the default parent font remain present


OK, So after digging into this further (and playing alot with this), it would appear it is not as simple to handle this as first thought. However, after searching for a solution as if this were my own problem, I have located the following which is what I recommend using to detect if the browser supports font face. If the browser doesn't support font face, just set it to use a standard local font, otherwise the user would have to wait for the font to load, unfortunately any delay you may be experiencing is most likely down to file size and really isn't is something I can help you with, other than by advising you load the font at the start of your page, and assign it at the end of the page.

detect HTML5 and CSS3 features (search for tests['fontface'])

Also take a look at these:

I hope you find this more useful.


share|improve this answer
that is not a bad idea for font-checking in a js-based environment.. – espais Jan 11 '11 at 11:40
As for "Is there a way I can use a default font until it is loaded in?" - "If the font-face is not available, it takes up the font-face of the parent element" – Chris Jan 12 '11 at 2:08
so simply defining a default style for the body element would probably suffice? – espais Jan 12 '11 at 14:02

Here's accurate, but heavy solution. You can use this in addition to previous answers, to be 100% sure.

Let's quess that the font hasn't been loaded yet. What we'll get in case of drawing it? There're two possible options:

  • Nothing.
    It's easy to check - draw it on blank space, and use getImageData to ensure it's totally empty.
  • Default or another* font.
    First, draw some letter ("a", for example) with this font at blank space and remember it's image data. Then, draw the same letter at very same position with your custom font. Finally, use getImageData to compare images data.

*By another font I meant possibility of using 2nd font, like ctx.font = "12px MyCustomFont Arial;". I'm not sure how browser will react in this case - will it use default font untill MyCustomFont gets loaded or will it use 2nd specified Arial instead.

UPD Just checked - my chrome v22, windows x64, shows nothing for unloaded font here.

share|improve this answer
Does no longer work in Chrome 26, Windows 7 X64. I see a fallback font. – Blaise Feb 8 '13 at 14:28

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.