Loading text with a remote web font has been successfully initiated in Fabric.js

Question

Loading text with a remote web font has been successfully initiated in Fabric.js

Currently, I am immersed in developing a large custom application using Fabric JS and thus far, my progress has been commendable. However, I have encountered an issue concerning the initialization of loaded text objects that utilize web fonts.

When the font is readily available on the client's device, everything functions as expected. However, if the webfont fails to load, the text object on the canvas defaults to a sans-serif font-family.

In essence, here is what I typically do (for illustration purposes, let's assume "allstar" is the webfont being utilized):

CSS: The CSS is incorporated within fonts.css, located within the head section preceding 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 called towards the end of the page, enclosed within $(document).ready(function(){})

var textSample = new fabric.Text(text, {
    fontFamily: "allstar",
});
canvas.add(textSample);
canvas.renderAll();

While implementing the font elsewhere on the webpage (e.g., within a transparent span element with a dot and the font properly loaded) yields positive results, I believe this approach may not be the most efficient coding practice.

At the moment, I am utilizing fabric.js version 1.3.0

javascript css fonts fabricjs

Answer 1

Answer №1

The problem:

Immediate rendering of Canvas
Webfonts loading by Google
Canvas unaware until the next re-render event

The solution:

Immediate rendering of Canvas
Google loads webfonts using a callback function
Force a re-render
Canvas is now updated

http://jsfiddle.net/vvL6f/6/

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) {      
        // Running this twice to ensure font loading and correct positioning
        canvas.renderAll();
        canvas.renderAll();
    });
})();

Answer 2

The problem:

Immediate rendering of Canvas
Webfonts loading by Google
Canvas unaware until the next re-render event

The solution:

Immediate rendering of Canvas
Google loads webfonts using a callback function
Force a re-render
Canvas is now updated

http://jsfiddle.net/vvL6f/6/

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) {      
        // Running this twice to ensure font loading and correct positioning
        canvas.renderAll();
        canvas.renderAll();
    });
})();

Answer 3

Answer №2

Shortcut:

<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("Apologies " + familyName + " font family cannot be loaded right now. Please try again later.");
            },
            active: function() {
                // implement font-related actions   
                $('#stuff').attr('style', "font-family:'Abel'");
                var text = new fabric.Text("Insert Text Here", {
                    left: 200,
                    top: 30,
                    fontFamily: 'Abel',
                    fill: '#000',
                    fontSize: 60
                });

                canvas.add(text);
            }
        });
</script>

Extended method When do web fonts load and can you pre-load them?

Additional details on web font loader https://github.com/typekit/webfontloader.

fabric.js specific https://groups.google.com/forum/#!topic/fabricjs/sV_9xanu6Bg

Answer 4

Shortcut:

<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("Apologies " + familyName + " font family cannot be loaded right now. Please try again later.");
            },
            active: function() {
                // implement font-related actions   
                $('#stuff').attr('style', "font-family:'Abel'");
                var text = new fabric.Text("Insert Text Here", {
                    left: 200,
                    top: 30,
                    fontFamily: 'Abel',
                    fill: '#000',
                    fontSize: 60
                });

                canvas.add(text);
            }
        });
</script>

Extended method When do web fonts load and can you pre-load them?

Additional details on web font loader https://github.com/typekit/webfontloader.

fabric.js specific https://groups.google.com/forum/#!topic/fabricjs/sV_9xanu6Bg

Answer 5

Answer №3

After experimenting with fabric.js and Google Web Fonts, I found a solution that worked well for me:

Check out the code in action on this Fiddle: http://jsfiddle.net/SaraCoder123/gyR8m/

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("Using Web Fonts", {
                    left: 200,
                    top: 30,
                    fontFamily: 'Jolly Lodger',
                    fill: '#000',
                    fontSize: 60
                });

canvas.add(text);
</script>

HTML

<canvas id="c" height="200px" width="400px"></canvas>

I discovered that including 'local' references in the Google Web Fonts CSS was key to getting it to work properly.

Answer 6

After experimenting with fabric.js and Google Web Fonts, I found a solution that worked well for me:

Check out the code in action on this Fiddle: http://jsfiddle.net/SaraCoder123/gyR8m/

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("Using Web Fonts", {
                    left: 200,
                    top: 30,
                    fontFamily: 'Jolly Lodger',
                    fill: '#000',
                    fontSize: 60
                });

canvas.add(text);
</script>

HTML

<canvas id="c" height="200px" width="400px"></canvas>

I discovered that including 'local' references in the Google Web Fonts CSS was key to getting it to work properly.

Answer 7

Answer №4

Encountered a similar issue myself. The font display is resolved only after a certain event triggers. To ensure proper rendering, simply activate the object after creation:

var sampleText = new fabric.Text(text, {
    fontFamily: "allstar",
});
canvas.add(sampleText);
canvas.setActiveObject(sampleText); // Activates the specified object
canvas.renderAll();

Answer 8

Encountered a similar issue myself. The font display is resolved only after a certain event triggers. To ensure proper rendering, simply activate the object after creation:

var sampleText = new fabric.Text(text, {
    fontFamily: "allstar",
});
canvas.add(sampleText);
canvas.setActiveObject(sampleText); // Activates the specified object
canvas.renderAll();

Answer 9

Answer №5

To achieve optimal results, utilize the setTimeout() function;

setTimeout(function(){
    var currentObject = canvas.getActiveObject();
    currentObject.set({
        fontFamily: style,
        useNative: true
    });
canvas.renderAll();},500);

For further reference, view the jsfiddle link provided below:

http://jsfiddle.net/muthupandiant/x3ptsgex/1/

Answer 10

To achieve optimal results, utilize the setTimeout() function;

setTimeout(function(){
    var currentObject = canvas.getActiveObject();
    currentObject.set({
        fontFamily: style,
        useNative: true
    });
canvas.renderAll();},500);

For further reference, view the jsfiddle link provided below:

http://jsfiddle.net/muthupandiant/x3ptsgex/1/

Answer 11

Answer №6

In the current year of 2017, incorporating web fonts into Fabric.js for Firefox is now a seamless process.

All you need to do is include the fonts using @import in your stylesheet or with <link href="..."> within the <head> section. Once added, you can easily select any desired font by utilizing fabric.Text's 'fontFamily' attribute.

To address any initial issues, simply calling canvas.renderAll(); will refresh the canvas and showcase all loaded web fonts correctly.

For a demonstration, check out this basic example on jsFiddle.

Answer 12

In the current year of 2017, incorporating web fonts into Fabric.js for Firefox is now a seamless process.

All you need to do is include the fonts using @import in your stylesheet or with <link href="..."> within the <head> section. Once added, you can easily select any desired font by utilizing fabric.Text's 'fontFamily' attribute.

To address any initial issues, simply calling canvas.renderAll(); will refresh the canvas and showcase all loaded web fonts correctly.

For a demonstration, check out this basic example on jsFiddle.

Loading text with a remote web font has been successfully initiated in Fabric.js

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

The React Router path is inaccurately matching to a different route

Wait to execute until the external script in Vue.js has finished loading

Is it necessary to have bidirectional relationships in Sequelize?

Editable content tag

What is the best approach to retrieve a recently upserted document in MongoDB?

Altering the look of a button as you navigate to it by tabbing

What exactly is the purpose of FormControl and why is it employed? In what ways should FormControl be properly utilized?

Customize Bootstrap 4 table by incorporating d-flex class and changing border color styling for a

Sort through a list of objects using the criteria from a separate array

How to Detect Font Resizing in Google Web Toolkit (GWT)

fresh map from Google: Coordinates LatLng may not be a number, but my hunch tells me it is

Switching video sources with jQuery and HTML5 can be achieved by clicking on an

What is the best way to change the format of a datetime?

tips for optimizing javascript file caching

Adsense displays empty ad banners regardless of their predetermined size

Vue-moment displaying incorrect time despite timezone setting

Using Foreach with Bootstrap to display a grid of 6 column items with images

Using AJAX, FLASK, and JavaScript to send an existing array to an endpoint

Issue with package: Unable to locate the module specified as './artifacts/index.win32-ia32-msvc.node'

"Encountering surprising outcomes while utilizing the csv-parser module in Node.js