Preload font HTML5, JS, Kinetic.js?

Asked 21/3, 2013 at 6:7 Answered 23/2, 2016 at 15:24

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!

Congress answered 21/3, 2013 at 6:7 Comment(7)

does the problem only happen in kinetic.js? – Templin 21/3, 2013 at 6:36

in which order do you load everything in head tag of the html? – Utile 21/3, 2013 at 6:37

loading it all in the head tag. Don't think its Kinetic.js - specific. Seems more likely to be a thing with the HTML canvas and that it can just used already loaded fonts, otherwise it falls back to default.. Any ideas? – Congress 21/3, 2013 at 6:55

is your font-face in an external css? if not put it there and try – Templin 21/3, 2013 at 7:18

you can also try to put a div before the canvas element that makes the font load <div style="font-family: myFont"></div> – Templin 21/3, 2013 at 7:21

still not working.. it always fails to draw the text in the right font on first load... any more ideas? – Congress 21/3, 2013 at 10:8

There should be a way for you to load the font, and once the page is ready, then draw the canvas. Try JQuery's .ready() function and put all your KineticJS code inside it. That way your canvas will be drawn after your page loads, it's like waiting to load an image and then drawing it on the canvas. – Oxidize 21/3, 2013 at 14:59

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

Rickey answered 3/5, 2013 at 18:32 Comment(0)

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".

Chromosome answered 23/2, 2016 at 15:24 Comment(0)

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.

Spectrograph answered 21/3, 2013 at 21:32 Comment(0)

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.

Recension answered 12/4, 2013 at 14:25 Comment(10)

Is there a jsbin example for more explanation please? – Chromosome 23/2, 2016 at 14:6

that´s all the code you need, after that you just need to set the correct fontFamily when creating a text element. – Recension 23/2, 2016 at 14:10

I am trying to use it with Font Awesome with no luck, kindly here is my attempt: jsbin.com/ditihivoqo/edit?html,output – Chromosome 23/2, 2016 at 14:23

Please note that Kinetic is the same as Konva – Chromosome 23/2, 2016 at 14:24

works fine for me, i can see the bike icon on the right screen...? – Recension 23/2, 2016 at 14:26

It's working on Internet Edge but it's not working on Chrome!! What is your browser please? – Chromosome 23/2, 2016 at 14:35

firefox. maybe try to implement a small timeout before loading konva? – Recension 23/2, 2016 at 14:45

actually, forget about the timeout, that´s a bad solution. i will add more information to my answer. – Recension 23/2, 2016 at 14:45

oh, you did have a container for that already, interesting. the only thing you forgot is to add text to it. it MUST not be empty. – Recension 23/2, 2016 at 14:51

Let us continue this discussion in chat. – Chromosome 23/2, 2016 at 14:55

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.

Adelaideadelaja answered 3/6, 2014 at 12:36 Comment(1)

timeouts are very bad workarounds, you can usually avoid them. check out my answer, you just need an additional div as "font hack". works great with kinetic/konva or phaser. – Recension 23/2, 2016 at 14:53

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  
     },
 });

Foghorn answered 24/6, 2015 at 4:10 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags