How to ensure that custom fonts are applied before executing JS

Question

When my page loads I execute JS to determine whether certain text fits inside its parent div. If it doesn't then stuff needs to be done.

The text uses a custom font, which is either loaded via @font-face or Google font, depending on the font.

The problem is that the JS sometimes runs before the font has been applied, leading to a wrong result since the fonts don't have exactly the same size/width.

EDIT, in response to comments:

I have the CSS in the header and the JS at the end of the document. I have now put all my code inside:

$(document).ready ( function(){...})

and the issue is still there.

When I have caching off then it measures the wrong height. When caching is on then it gets the right height, presumably because of the time to apply the font.

Can you post your code? before seeing your code, have you tried adding your javascript to the bottom of your file so that it loads last? — Full Stack Alien
– Full Stack Alien, Commented Nov 7, 2015 at 0:49
Run your code in the window.onload function. That should delay it until everything is loaded. — Barmar
– Barmar, Commented Nov 7, 2015 at 0:50
@barmar, I tried putting all the JS inside a "$(document).ready ( function().., but the issue is still there. — user984003
– user984003, Commented Nov 7, 2015 at 1:24
document.ready runs when the DOM is loaded, but doesn't wait for asynchronous elements to be loaded. — Barmar
– Barmar, Commented Nov 7, 2015 at 2:34

user984003 · Accepted Answer · 2015-11-18 17:04:30Z

1

I ended up writing JS code that compares the width of two elements: one with a websafe font and one with the font and whose backup font is the same websafe font.

The elements start out with the same width and then become different when the Google font is rendered. The code loops and then exits and runs the rest of the code when the font has been rendered.

The issue with window.onload, for this webpage, is that it also waits for all the images to load, which I do not want my js to wait for.

answered Nov 18, 2015 at 17:04

user984003

29.9k69 gold badges205 silver badges320 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Juliver Galleto · Accepted Answer · 2015-11-07 01:36:27Z

0

try

$(window).load(function(){
    //your code here...
});

answered Nov 7, 2015 at 1:36

Juliver Galleto

9,09728 gold badges93 silver badges170 bronze badges

1 Comment

user984003 Over a year ago

Sorry, I meant to say does NOT fix the issue. (Deleted that comment)

Collectives™ on Stack Overflow

How to ensure that custom fonts are applied before executing JS

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related