I need to use a font taken from a specific folder with Fabric JS

Question

I've built a simple image editor using Fabric JS. The editor is not online, but runs on a local machine without a web server installed, so to run it I just double-click on an html file and it opens into the browser with the file:// protocol. Inside the folder assets/fonts I've put the files of the fonts which I want to use (.ttf).

Some of these fonts are not installed on the machine, so I want to tell to Fabric JS to take the fonts from the folder incuded in the project.

I've already tried to use the path attribute of IText and tried to set useNative both to true and false, but with no success.

Being on a local machine without a webserver installed I tried to set a relative path to the folder, like assets/fonts or assets/fonts/ and other similar.

I've read this about path: "URL of a font file, when using Cufon", reading about Cufon it seems that it is deprecated and probably that's why I can't use the fonts from my folder.

Do you know if it is possible to use a font taken from a specific folder with Fabric JS?

Update:

I've tried to use a simple web server "miniweb" and now the application works using the http:// protocol, anyway, even trying to pass the path to the font file in several ways to the path parameter, FabricJS keeps to ignore it. Again I've tried to use the useNative parameter for IText passing false to it, no luck.

Update 2:

this is the code where I create the text object to add to the canvas

var txt = (new fabric.IText(nome, {
    fontFamily: 'A_Inc_Corsivo',
    path: 'Corsivo_Incimar.ttf',
    // useNative: false,
    fontSize: s,
    fill: c,
    hasBorders: true,
    hasControls: true,
    lockScalingY: true,
    left: 0,
    top: 0
}));

canvas.add(txt);

The text is added to the canvas, but using Times New Roman or something like it. Just to try I've now put the .ttf file in the same folder where the js script and html page are, so that there is no possibility to use the wrong path.

If I use @font-face into the CSS and then inside the html code of the page I put <span style="font-family:'A_Inc_Corsivo'">Some text</span> the text appears with the correct font.

This is the @font-face used into the css file

@font-face {
    font-family: 'A_Inc_Corsivo';
    src: url('Corsivo_Incimar.ttf');
}

Answer 1

Include the font the same way you would without fabric, fabric is actually completely irrelevant here.

@font-face {
  font-family: "Font Name";
  src: url("/path/to/file.ttf");
}

Here's the solution I use to inject ~300 fonts directly into the browser (files are only loaded when they're needed):

var fonts = (function () {

    return {
        stylesheet: null,

        injectAll: function (fonts) {
            if (this.stylesheet === null) {
                this.stylesheet = this.generateStyleSheet();
            }

            fonts.forEach(this.insertFont.bind(this));
        },

        insertFont: function (font) {
            var rule = this.getFontRule(font);
            this.stylesheet.insertRule(rule, 0);
        },

        getFontRule: function (font) {
            var fontFaceStr = '@font-face { font-family: "' + font.familyName + '"; src: url(/path/to/font/' + font.fileName + '); }';

            return fontFaceStr;
        },

        generateStyleSheet: function () {
            var style = document.createElement('style');

            style.appendChild(document.createTextNode('')); // webkit hack
            document.head.appendChild(style);

            return style.sheet;
        }
    };
})();

Usage:

var fontlist = [{ fileName: 'CustomFont.tff', familyName: 'Custom Font SC' }, { fileName: 'CustomFont-Two.tff', familyName: 'Custom Font Two SC' }];

font.injectAll(fontlist);

Answer 2

Solution: use a web server anyway.

And I don't mean "install a massive server package like Apache, IIS, Tomcat, whatever", but "just fire up a tiny http server that does exactly the same thing that you already expect now, except as proper http:// site instead of file:///".

For instance, if you have python installed, it can do this with a command line one-liner: run python -m SimpleHTTPServer in the dir your index.html is in, and open http://localhost:8000 - done.

Or if you're a node user, install live-server using npm install -g live-server and then run live-server in the dir your index.html file is in. That'll even open the site in your browser for you. Again, done.

Just use a webserver so that the browser executes your html as a webpage instead of as a potentially dangerous source of security exploits due to being just a random file on your hard disk with potentially full access to your filesystem (because browsers can have bugs, and if one of those is related to relative link parsing, file:/// resources could be used to steal any file on your disk if browsers allowed the same permissions to file:/// resources as they do to http:// resources).

The base rule is: if you write anything that you're going to use a browser for, work with it through a proper http:// channel. Never rely on file:///.