8
\$\begingroup\$

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?

\$\endgroup\$
2
  • 3
    \$\begingroup\$ 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. \$\endgroup\$
    – user744
    Jan 10, 2011 at 19:23
  • \$\begingroup\$ @Joe - good point, question updated \$\endgroup\$
    – erik
    Jan 11, 2011 at 11:20

4 Answers 4

3
\$\begingroup\$

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

EDIT:

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: http://paulirish.com/2009/font-face-feature-detection/ http://news.ycombinator.com/item?id=1347011

I hope you find this more useful.

Regards,Chris

\$\endgroup\$
3
  • \$\begingroup\$ that is not a bad idea for font-checking in a js-based environment.. \$\endgroup\$
    – erik
    Jan 11, 2011 at 11:40
  • \$\begingroup\$ 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" \$\endgroup\$
    – Chris
    Jan 12, 2011 at 2:08
  • \$\begingroup\$ so simply defining a default style for the body element would probably suffice? \$\endgroup\$
    – erik
    Jan 12, 2011 at 14:02
2
\$\begingroup\$

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.

\$\endgroup\$
1
  • 1
    \$\begingroup\$ Does no longer work in Chrome 26, Windows 7 X64. I see a fallback font. \$\endgroup\$
    – Blaise
    Feb 8, 2013 at 14:28
2
\$\begingroup\$

The JavaScript FontFace class is (as of July 2020) still a working draft, but already supported by all browsers except (as usual) Internet Explorer.

It can be used to load a font via JavaScript and provides a Promise-based API which allows to execute a callback function if/when the font is actually loaded:

let myFont = new FontFace("myFont", "url(fonts/MyReallyCoolFont.ttf)");
myFont.load().then(
    font => {
        // your font is now loaded. 
        // Now you just need to make it available to the DOM:
        document.fonts.add(font);
        // and then you can refer to it by name:
        ctx.font = '12px myFont';
    },
    error => {
        // your font could not be loaded. 
        console.log(error);
    }
)
\$\endgroup\$
0
\$\begingroup\$

This answer about a similar question on StackOverflow gives a detailed solution to detecting when the font has loaded. It repeatedly draws a character in the font that should be loaded, and when it notices that the number of pixels suddenly changes it knows the font has been loaded and invokes a callback. The detection function is written for FontAwesome and similar fonts, but you can adjust it to suit your needs.

\$\endgroup\$

Not the answer you're looking for? Browse other questions tagged .