Reputation: 1064
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');
}
Upvotes: 1
Views: 1674
Reputation: 3811
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);
Upvotes: 2
Reputation: 53735
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:///
.
Upvotes: 0