loading preloaded fonts at the optimal moment

Question

loading preloaded fonts at the optimal moment

My webfonts are loaded using Webfontloader as shown below:

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<script>
    WebFont.load({
        custom: {
            families: ['BlenderProBook', 'BlenderProMedium']
        }
    });
</script>

Initially, everything works perfectly when the page is first loaded. However, the issue arises when refreshing the page, as it only retrieves the cached fonts after they are requested in HTML and not before my ReactJS app starts running (when the Webfontloader usually fetches them). This timing doesn't work for me because I need to use these fonts in pre-generated SVG.

Is there a way to ensure that the uncached fonts are fetched every time? Alternatively, is there a method to load the cached fonts at the appropriate moment?

javascript fonts webfonts webfont-loader

Answer 1

Answer №1

I have managed to find a solution for this issue, and I am considering it as my answer unless someone else comes up with a better one.

The font in question is extensively used in the application to calculate text widths and layout requirements. This is why it must be loaded before the app starts running. To prevent the app from running until the font is properly loaded, I decided to implement a test using the text width code.

Here is the code snippet:

var testFont = require('./components/svgText.js');
var timer = setInterval(function () {
    var test = (testFont('TEST', 'BlenderProBook', 20).width === 39.75);
    if (test) {
        clearInterval(timer);
        Router.run(routes, function (Handler) {
            React.render(<Handler/>, document.body);
        });
    }
}, 50);

The `svgTest.js` file utilizes Raphael SVG to generate SVG text and extract measurements in the following manner:

renderedTextSize = function (string, font, fontSize) {
    var paper = Raphael(0, 0, 0, 0);
    paper.canvas.style.visibility = 'hidden';
    var el = paper.text(0, 0, string);
    el.attr('font-family', font);
    el.attr('font-size', fontSize);
    var bBox = el.getBBox();
    paper.remove();
    return {
        width: bBox.width,
        height: bBox.height
    };
};

module.exports = renderedTextSize;

Although testing against a specific width value may seem like a workaround, this approach is proving to be effective in ensuring the proper loading of fonts before the application runs smoothly.

Answer 2

I have managed to find a solution for this issue, and I am considering it as my answer unless someone else comes up with a better one.

The font in question is extensively used in the application to calculate text widths and layout requirements. This is why it must be loaded before the app starts running. To prevent the app from running until the font is properly loaded, I decided to implement a test using the text width code.

Here is the code snippet:

var testFont = require('./components/svgText.js');
var timer = setInterval(function () {
    var test = (testFont('TEST', 'BlenderProBook', 20).width === 39.75);
    if (test) {
        clearInterval(timer);
        Router.run(routes, function (Handler) {
            React.render(<Handler/>, document.body);
        });
    }
}, 50);

The `svgTest.js` file utilizes Raphael SVG to generate SVG text and extract measurements in the following manner:

renderedTextSize = function (string, font, fontSize) {
    var paper = Raphael(0, 0, 0, 0);
    paper.canvas.style.visibility = 'hidden';
    var el = paper.text(0, 0, string);
    el.attr('font-family', font);
    el.attr('font-size', fontSize);
    var bBox = el.getBBox();
    paper.remove();
    return {
        width: bBox.width,
        height: bBox.height
    };
};

module.exports = renderedTextSize;

Although testing against a specific width value may seem like a workaround, this approach is proving to be effective in ensuring the proper loading of fonts before the application runs smoothly.

loading preloaded fonts at the optimal moment

Answer №1

Similar questions

Encountering a "Token Error: Bad Request" when attempting to call the callback URL

Is there a way for me to manipulate the RGB values of the canvas in such a manner that the Red and Green components of the gradient are determined by dividing the position of my mouse cursor

To prevent the default alignment in case the text exceeds the input length, stop the automatic alignment

Troubleshooting the "Request failed with status code 500" error when refreshing a page in a React application

Connect data dynamically to the p-table based on columns

Issue with retrieving query results using node_redis client

Exploring the functionality of the load event in JQuery for images

"Performing validation on a number input by using the ng-change event

Is there a convenient method to combine arrays of objects in JavaScript using ellipses or an equivalent approach?

Verify that a minimum of one checkbox has been ticked according to JavaScript guidelines, with appropriate notifications in case

Is it possible to integrate a standard drop-down menu/style into a MUI Select component?

What is the process for setting environment variables in a Svelte project?

Unable to get the code for automatically refreshing a DIV every 5 seconds to function properly

"Ensure only one checkbox is selected at a time by unchecking the previous

Creating a custom PHP webpage and integrating it with a WordPress theme

What is the process of sending an HTTP/HTTPS request from a Node.js server?

Immense trade adhesive navigation bar menu

Transform socket.on into a promise

Guidance sought on utilizing a callback to retrieve data from mysql using node.js and ejs

Utilize jQuery to select the parent checkbox and mark it as checked