I'm working on a big custom application with Fabric JS and I already did a great job. But I have a problem with init loaded text object that uses a webfont.
As long as that font is local on the client's computer, I works fine, ELSE the webfont is NOT loaded and the text object on the canvas is rendered in a default sans-serif font-family.
Here is, in short, what I do (in this example I use "allstar" as my webfont) :
CSS: The css is loaded inside fonts.css in the head before fabric.js
@font-face{
font-family:'allstar';
src:
url('/path-to-fonts/all_star-webfont.eot');
src:
url('/path-to-fonts/all_star-webfont.eot?#iefix') format('embedded-opentype'),
url('/path-to-fonts/all_star-webfont.woff') format('woff'),
url('/path-to-fonts/all_star-webfont.ttf') format('truetype'),
url('/path-to-fonts/all_star-webfont.svg#allstarregular') format('svg');
font-weight:normal;
font-style:normal
}
Javascript: this is loaded at the bottom of the page inside $(document).ready(function(){})
var textSample = new fabric.Text(text, {
fontFamily: "allstar",
});
canvas.add(textSample);
canvas.renderAll();
If I use the font elsewhere on the page (eg: in a transparent span tag with a dot and the font loaded), it works fine. But I don't think that's a proper way to code.
I Use fabric.js version 1.3.0
The issue:
The solution:
WebFontConfig = {
google: { families: [ 'Ribeye::latin', 'Lora::latin', 'Croissant+One::latin', 'Emblema+One::latin', 'Graduate::latin', 'Hammersmith+One::latin', 'Oswald::latin', 'Oxygen::latin', 'Krona+One::latin', 'Indie+Flower::latin', 'Courgette::latin', 'Ranchers::latin' ] }
};
(function() {
var src = ('https:' === document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
$.getScript(src, function(data) {
// Not sure why I need to run this twice but it makes it load the font and then reposition the font to it's correct coords.
canvas.renderAll();
canvas.renderAll();
});
})();
Using fabric.js and Google Web Fonts, the following code works for me:
Fiddle: http://jsfiddle.net/DanBrown180/vvL6f/
CSS
<Style>
@font-face {
font-family: 'Jolly Lodger';
font-style: normal;
font-weight: 400;
src: local('Jolly Lodger'), local('JollyLodger'),
url(http://themes.googleusercontent.com/static/fonts/jollylodger/v1/RX8HnkBgaEKQSHQyP9itiaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
<style>
Javascript
<script type = "text/javascript">
canvas = new fabric.Canvas('c');
var text = new fabric.Text("Web Font Example", {
left: 200,
top: 30,
fontFamily: 'Jolly Lodger',
fill: '#000',
fontSize: 60
});
canvas.add(text);
</script>
HTML
<canvas id="c" height="200px" width="400px"></canvas>
Looks like it's because the Google Web Fonts css code uses:
src: local('Jolly Lodger'), local('JollyLodger')
in the CSS
I had the same problem. Font renders correctly after some event is fired.. So after creating an object we can set it active:
var textSample = new fabric.Text(text, {
fontFamily: "allstar",
});
canvas.add(textSample);
canvas.setActiveObject(textSample); // Selects the object
canvas.renderAll();
Short way:
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
WebFont.load({
google: {
families: [ 'Abel', 'Aclonica']
},
fontinactive: function(familyName, fvd) {
console.log("Sorry " + familyName + " font family can't be loaded at the moment. Retry later.");
},
active: function() {
// do some stuff with font
$('#stuff').attr('style', "font-family:'Abel'");
var text = new fabric.Text("Text Here", {
left: 200,
top: 30,
fontFamily: 'Abel',
fill: '#000',
fontSize: 60
});
canvas.add(text);
}
});
</script>
Long way When do web-fonts load and can you pre-load them?
More on web font loader https://github.com/typekit/webfontloader .
fabric.js specific https://groups.google.com/forum/#!topic/fabricjs/sV_9xanu6Bg
The best method is using setTimeout();
setTimeout(function(){
var activeObject = canvas.getActiveObject();
activeObject.set({
fontFamily: font,
useNative: true
});
canvas.renderAll();},500);
Check the jsfiddle
As of 2017, it is easily possible to use web fonts within Fabric.js in Firefox.
You only have to include them via @import
(in your stylesheet) or via <link href="...">
(in <head>
). Afterwards you can select any font you want using fabric.Text's attribute 'fontFamily'.
Concerning your initial problem, calling canvas.renderAll();
should redraw the canvas and thus display all loaded web fonts correctly.
See a simple example on jsFiddle .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.