No Login Data Private Local Save

Font Loading API Demo - Online Wait for Fonts Ready

17
0
0
0

Font Loading API Demo

Test document.fonts — wait for fonts ready, measure load times & inspect FontFaceSet

Select Fonts to Load
Load Status
Idle — Ready for action
Elapsed: 0.00s
Fonts registered: —
Fallback Font (System)
The quick brown fox jumps over the lazy dog. 1234567890
Custom Font Waiting
The quick brown fox jumps over the lazy dog. 1234567890
Registered Fonts in document.fonts
Family Weight Style Status Check()
Click "Refresh List" or load fonts to populate
Event Log
Tool ready. Select fonts and click "Load Fonts" to begin.
Quick API Reference

Wait for all fonts ready

await document.fonts.ready;
// All fonts loaded, safe to render

Load a specific font

await document.fonts.load('16px "Roboto"');
// Specific font ready

Check if font is loaded

document.fonts.check('16px Roboto');
// Returns true/false

Iterate all fonts

document.fonts.forEach(f => {
console.log(f.family, f.weight);
});
Frequently Asked Questions

The Font Loading API (CSS Font Loading API) provides a programmatic way to dynamically load, check, and manage web fonts via JavaScript. The core entry point is document.fonts — a FontFaceSet object that represents all fonts currently registered on the page. It exposes .ready (a Promise), .load(), .check(), and .forEach() methods, giving developers fine-grained control over font loading behavior.

document.fonts.ready returns a Promise that resolves when all fonts on the page have finished loading (or failed). This includes fonts defined via @font-face in CSS as well as fonts added dynamically via FontFace + document.fonts.add(). If all fonts are already loaded at the time of access, the Promise resolves immediately. This is the most common method to safely trigger rendering after web fonts are available, helping avoid FOIT (Flash of Invisible Text).

document.fonts.load(fontSpec) triggers loading of a specific font (e.g., 'bold 16px "Roboto"') and returns a Promise that resolves when that particular font is ready. document.fonts.ready, on the other hand, waits for all fonts on the entire page. Use .load() when you need to preload a specific font before using it; use .ready as a global "all fonts done" gate.

The best strategy combines CSS font-display: swap with the Font Loading API. Set font-display: swap in your @font-face rules so the browser uses a fallback font immediately. Then use document.fonts.ready.then(() => { ... }) to detect when the custom font arrives, and apply a class to re-render or adjust layout if needed. For critical text, you can also use document.fonts.load() early in the page lifecycle to pre-warm specific fonts before they are needed for rendering.

The CSS Font Loading API (document.fonts) is supported in all modern browsers: Chrome 35+, Firefox 41+, Safari 10+, Edge 79+, and Opera 22+. It is not supported in Internet Explorer. For IE compatibility, you would need a polyfill or fallback approach (e.g., using the Font Face Observer library). You can feature-detect support by checking if (document.fonts && document.fonts.ready) { ... }.

Yes! Use the FontFace constructor to create a font programmatically:
const ff = new FontFace('MyFont', 'url(/font.woff2)', { weight: '700' });
Then call await ff.load() and document.fonts.add(ff) to register it. This is powerful for loading fonts on-demand without needing CSS @font-face declarations. The font becomes available immediately for rendering after being added to document.fonts.
🔧 Related Tools