Load custom font for Fabric.js

Question

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.

Answer 1

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