Menu
The following webpage loads Font Awesome, displays the icon fa-check, and has a debugger breakpoint on window.onload:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<script>
window.onload = function () {
debugger;
};
</script>
</head>
<body>
<div class='fa fa-check fa-4x'></div>
</body>
</html>
On Chrome (with the console open), the breakpoint is hit after the icon is rendered. This is the expected behaviour.
On Safari (with the console open), the breakpoint is hit before the icon is rendered. I am assuming this is a Safari bug.
How can I guarantee that window.onload triggers after the icon is rendered on Safari?
493
You can check the font loading status using document.fonts.ready which returns a promise you can resolve, using then(...):
document.fonts.ready.then(function() {
// Any operation that needs to be done only after all the fonts
// have finished loading can go here.
});
See supported browsers here:
https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts
89
Figuring out exactly when a font has loaded on the page is unfortunately a very difficult problem, especially when you have to support multiple browsers/devices. Last time I took a survey there was no magic bullet but many people have written up their approaches. See here and here and here.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
