Home/ Questions/Q 6187783
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T02:07:02+00:00

How do I access the DOM to detect when my page’s webfonts have loaded?

  • 0

How do I access the DOM to detect when my page’s webfonts have loaded?

I have 29 .ttf fonts base64-encoded into a single CSS file. I also have a hidden div on the page that uses each of the fonts, to make the browser read each of the fonts into memory. That process takes time, so I need to queue an AJAX event to fire after the browser has loaded each of the fonts into memory.

*I know that document.ready and window.onload get close, but I want to fire the event before the rest of the external resources finish loading to make the AJAX fire sooner.

(jQuery as a last resort, please)

================

Added Sample Code:

HTML

<head>
...
<link type="text/css" rel="stylesheet" href="TTF-embedded-fonts.css" />
<script type="text/javascript" src="load-fonts.js"></script>
</head>

load-fonts.js

var ST1 = document.createElement('div');
ST1.setAttribute('id', 'fontloader');
ST1.innerHTML = "<span style='font-family:samplefont'>a<b>b<i>c</i></b><i>d</i></span> ... ";
ST1.style.cssText = "height:0px;text-indent:-9999px;visibility:hidden";

window.document.body.onload = appendST1 ();
function appendST1() { document.body.appendChild(ST1) };

[FONT-LOAD HANDLER HERE] { API.Ajax.loadComplete("load-fonts.js") };

TTF-embedded-fonts.css

@font-face {
    font-family: 'samplefont';
    src: url(data:font/truetype;charset=utf-8;base64,AAAE...) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'samplefont';
    src: url(data:font/truetype;charset=utf-8;base64,AAAE...) format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'samplefont';
    src: url(data:font/truetype;charset=utf-8;base64,AAAE...) format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'samplefont';
    src: url(data:font/truetype;charset=utf-8;base64,AAAE...) format('truetype');
    font-weight: bold;
    font-style: italic;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Google’s WebFont Loader solves this problem. Use the custom module to load the CSS, and then use any of the six javascript callback events to signal when the fonts have loaded and/or failed to load.

    I have tested this method. It works for base64 encoded fonts and regularly linked fonts.

    *For non-javscript fallback, make sure to include a duplicate link to the CSS stylesheet in the HTML when using the Google WebFont Loader.

    • 0