Using my own fonts inside a canvas

Question

I'm trying to use my own font inside a canvas, can't make it work. (The browser uses the default font instead.)

    <style type="text/css">
        @font-face {
            font-family: "typewriter";
            src: url("TravelingTypewriter.ttf") format('truetype');
        }
    </style>
    <script>
        window.onload = function(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            var image = new Image();
            image.onload = function(){
                context.drawImage(image, 0, 0);
                context.font = "40pt typewriter"
                context.fillText("text", 40, 40);
            };
            image.src = "Open Book.png"; 
        }   
    </script>

What am I doing wrong?

score 0 · Answer 1 · edited May 23 '17 at 12:06

Your font probably hasn't loaded yet, so it's falling back to the default.

An easy way to check if that's happening is to open the console (F12) several seconds after you're sure the font has loaded, and then paste in the code you have in your function. If it works, then you know the issue is the font loading time, in which case you'll need to execute that function only after the font has loaded.

Have a look at How to know if a font (@font-face) has already been loaded? for info on how to do that.

Using my own fonts inside a canvas

1 Answers1