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

Problems with IE8 - Rendering correctly on all other browsers

What is the specific function of $('id').on('click', this.method.bind(this)) in this scenario?

Leveraging React hooks to combine an array and an object within an array

Encountering a Javascript 404 error while attempting to make an API call

Generate a dynamic file import loop within a React application

Error: Unable to execute fields.map function while generating a dynamic sitemap using next-sitemap module

Bizarre display of miscellaneous items on the monitor

The creation of an indexedDB database and the addition of content encountered an error while trying to perform a 'transaction' on the IDBDatabase

Implementing nested popup windows using Bootstrap

Implement a counter in a JavaScript table, initializing it to zero

What is the most effective way to remove or modify an element in an array when a button is clicked?

Obtain Information from an Ajax GET Request

Use ajax to load a webpage into a specific div, then reload the same div after submitting

Steps for launching a browser using Capybara and Selenium

Achieving Automatic Scrolling of Drawer in Material UI React JS

Building a node.is script to validate email addresses

how can I display the JSON description based on the corresponding ID using Ionic 3

What is the best way to combine two DIV table rows within Bootstrap 5?

"jQuery enables hover effects to be applied to elements that are not directly related

Prior activation of express render before parameter assessment