fontsfabricjs

Load custom font for Fabric.js

I'm looking to add an Open-Type Font to my Fabric.js app. I found this question, Custom font in Pixi.js, pretty much asking the same thing. How can we load a font from our file system? I tried using CSS @font-face as well.

Solution

  • The answer was found on this question and the one linked above. It seems I had some spelling issues with my code in relation to my filename. So to be clear, the correct answer is to use CSS font face like:

    @font-face {
    font-family: test-family;
    src: url('path/to/fontfile');
}

    Then use the font family name inside the text object as such:

    var t = new fabric.Text('text', {
    fontFamily: 'test-family',
});