Preload font HTML5, JS, Kinetic.js?

Question

I have a custom font (*.ttf), that I am using to write text on the HTML canvas using Kinetic.js.

Unfortunately, on the first loading of the page it is not using my custom font, when reloading the page all is good.

Can I preload the font somehow?

I have tried this, but still not working:

<link rel="prefetch" href="resource/font/IDAutomationHC39M.ttf">

Can I tell Kinetic.js to preload it somehow?

The font is defined in my CSS like this:

@font-face {
    font-family: "Barcode";
    src: url(../font/IDAutomationHC39M.ttf);
}

Thanks in advance for your support!

Answer 1

I had the same problem with FontAwesome. Here is my solution:

//wait for fontawsome to load
setTimeout(function(){
   kineticStuff();
}, 500);

No need to add an element to your page.

Answer 2

It usually works in all browsers, you just have to use font-face correctly. Just use a generator like this one: http://www.fontsquirrel.com/tools/webfont-generator

It creates a zip files with 4 font files (eot, svg, ttf, woff), and there is a css file with the necessary code:

@font-face {
    font-family: 'myfont';
    src: url('myfont.eot');
    src: url('myfont.eot?#iefix') format('embedded-opentype'),
         url('myfont.woff') format('woff'),
         url('myfont.ttf') format('truetype'),
         url('myfont.svg#myfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

I am using KineticJS, when i create the stage after page load it works with the correct font:

window.onload = function () {
    var stage = new Kinetic.Stage({
            container: 'container',
            width: 800,
            height: 600
    });
    //code for creating a layer, text and whatnot with kinetic
}

Should also be no problem if you don´t use Kinetic, of course.

If it does not work in some browsers, the font may not be loaded correctly. Using a timeout would be a bad workaround imho, you can try adding a hidden div right after the opening body tag:

<div class="font-hack" style="font-family:'your-font';">nothing to see here, move along</div>

It does not matter what you write there (it must not be empty though).

I am not working with Kinetic anymore, but this works great with the Phaser Engine.

Answer 3

I had a same problem today.. I ended up using this

<style>
@font-face {
    font-family: 'ArchivoBlack-Regular';
    src: url('../fonts/ArchivoBlack-Regular.ttf');
}
</style>

<div style="font-family:'ArchivoBlack-Regular'">&nbsp;</div>

After that you can do you normal KineticJS Stuff..! Actually its necessary to Load the Font first before using it..! I'm not good in English, but i hope u got my point. Also have a look at that link: Github Link

Answer 4

You could use this old css hack to force the font to be available:

Add a hidden element to the page that specifies Barcode font

<span id="mustLoadMe">

And then in the CSS:

#mustLoadMe
{
    visibility: hidden;
    position: absolute;
    font-family: Barcode, Arial, Sans-serif;
}

Finally, use jQuery to wait on the font to load before drawing text in your canvas.

$("#mustLoadMe").load(function() {
       // do your canvas stuff here because the font should be loaded now...
});

Note: You might have to resort to $(window).load() in step#3 above to account for certain browsers async loading of fonts.

Answer 5

Via Google's webfontloader https://github.com/typekit/webfontloader

testStrings need to be used to determine whether or not a font with glyphs has loaded. If your font do not have glyphs or custom subsets, you do not need to use testStrings

 WebFont.load({
     custom: {
         families: ['fontFamily1'],
         testStrings: {
             'fontFamily1': '\uE600'
         },
     },
     timeout: 5000 // Set the timeout to five seconds
         ,
     fontactive: function(familyName, fvd) {
        // the font have been loaded and now you can do what you want
     },
     fontinactive: function(familyName, fvd) {
         // the font could not be loaded  
     },
 });

Answer 6

May be it is late to answer but it's worth mentioning with a full example.

Please note that KonvaJS is derived from KeneticJS and is supported, but Keneticjs is not supported anymore.

window.onload = function () {
var stage = new Konva.Stage({
      container: 'container',
      width: 1000,
      height: 1000
    });

    var layer = new Konva.Layer();

    var simpleText = new Konva.Text({
      x: stage.getWidth() / 10,
      y: 15,
      text: "\uf21c",
      fontSize: 300,
      fontFamily: 'FontAwesome',
      fill: 'green'
    });
  layer.add(simpleText);
  stage.add(layer);
  
}

  @font-face {
    font-family: 'FontAwesome';
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/fonts/fontawesome-webfont.ttf');
    font-weight: normal;
    font-style: normal;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"/>
  <script src="https://cdn.rawgit.com/konvajs/konva/0.11.1/konva.min.js"></script>
  <title>JS Bin</title>
</head>
<body>
  <div id="container" style="font-family:'FontAwesome'">dummyText</div>
</body>
</html>

Many thanks to @luschn for his great answer because as he stated: "timeout is bad solution".