Can I use a custom font in an HTML5 canvas?

Question

Can I use a custom font in an HTML5 canvas?

Has anyone had success importing a custom font for use in HTML5 canvas? I've been trying to do this by loading the font file on my computer, but all my attempts have failed so far. The canvas keeps showing the default font instead of the one I want to use. It seems like there might be a step or process that I'm missing.

Currently, I am attempting to load the font with CSS:

@font-face {
    font-family: 'RifficFree-Bold';
    src: local('RifficFree-Bold'), url(./fonts/RifficFree-Bold.ttf), format('truetype');
}

Then, I call the font in JavaScript like this:

function drawText(myText, ctx) {
    ctx.font = "40px RifficFree-Bold";
    ctx.fillStyle = "rgb(0, 0, 0, " + myText.fill + ")";
    ctx.fillText(myText.text, myText.x, myText.y);
}

I can confirm that the program is recognizing the font because changing the font size value actually affects the displayed text. This leads me to believe that maybe the font file itself is not being loaded correctly. Any thoughts or suggestions?

javascript css html fonts html5-canvas

Answer 1

Answer №1

The unique font-face fonts are only loaded when they are actively used, as discussed in more detail in a related question. This means that when you run your drawText function, the font will not start loading until after ctx.fillText has been called, by which point the text will have already been rendered using the default font.

If you want to ensure the font is pre-loaded, there are two methods you can use:

Place a hidden div with some text in the desired custom font on any part of the page (this div can be removed once the font loads).

Alternatively, if you prefer not to modify the HTML or need to load multiple fonts, you can create a simple function for loading fonts:

function _loadFont(fontname){
    var canvas = document.createElement("canvas");
    //Setting dimensions may not be necessary
    canvas.width = 16;
    canvas.height = 16;
    var ctx = canvas.getContext("2d");

    //Attaching the canvas is unnecessary,
    //the browser will load the active font upon calling fillText

    //For multiple custom fonts, simply draw each one here
    ctx.font = "4px "+fontname;
    ctx.fillText("text", 0, 8);
}

Call this function before utilizing the font, ensuring it is loaded and ready when needed.

Answer 2

The unique font-face fonts are only loaded when they are actively used, as discussed in more detail in a related question. This means that when you run your drawText function, the font will not start loading until after ctx.fillText has been called, by which point the text will have already been rendered using the default font.

If you want to ensure the font is pre-loaded, there are two methods you can use:

Place a hidden div with some text in the desired custom font on any part of the page (this div can be removed once the font loads).

Alternatively, if you prefer not to modify the HTML or need to load multiple fonts, you can create a simple function for loading fonts:

function _loadFont(fontname){
    var canvas = document.createElement("canvas");
    //Setting dimensions may not be necessary
    canvas.width = 16;
    canvas.height = 16;
    var ctx = canvas.getContext("2d");

    //Attaching the canvas is unnecessary,
    //the browser will load the active font upon calling fillText

    //For multiple custom fonts, simply draw each one here
    ctx.font = "4px "+fontname;
    ctx.fillText("text", 0, 8);
}

Call this function before utilizing the font, ensuring it is loaded and ready when needed.

Answer 3

Answer №2

The issue in the example provided appears to be the placement of the comma (,) between the url and format parameters. It is important for the format to directly follow the url:

src: local('RifficFree-Bold'), url(./fonts/RifficFree-Bold.ttf) format('truetype');

Answer 4

The issue in the example provided appears to be the placement of the comma (,) between the url and format parameters. It is important for the format to directly follow the url:

src: local('RifficFree-Bold'), url(./fonts/RifficFree-Bold.ttf) format('truetype');

Can I use a custom font in an HTML5 canvas?

Answer №1

Answer №2

Similar questions

Design a custom scrolling navigation bar for enhanced user experience

Invoke the identical function in between two functions that make asynchronous AJAX calls

Exploring the world of JSON and JavaScript data structures

Incorporate a pseudo class to a unique custom template or directive within an Angular project

Tips for utilizing a vue.js nested for loop with two arrays using v-for

Exploring HTML5 video playback in AngularJS

Tips for fixing a type error in javascript/cypress

How can I utilize a PHP variable as the height and width parameters in a CSS style?

Exploring various queries in Firestore

Retrieving a targeted JSON element and adding it to a fresh object

[Vue alert]: Component mounting failed due to usage of mixin with a parameter

Encountering an error with [object%20Object] when utilizing ajaxFileUpload

Accessing PHP parameters in JSP files can be accomplished by utilizing specific

What could be causing these transformed canvases to not display fully in Chrome at specific resolutions?

Tips for keeping div and input tags selected even after a user clicks

Adding the target='_parent' attribute to the infowindow of a Google Fusion Map by utilizing a click event listener

Exploring how to use React with a select component featuring objects

Tips for aligning the timing of two CSS animations

The canvas loadFromJson function fails to implement the font-family property

Error message: "An issue occurred with the Bootstrap Modal in