What is the CSS Font Loading API?
The CSS Font Loading API is a JavaScript-based interface that allows developers to asynchronously load font resources and manage their usage within a document. It provides a programmatic way to monitor the loading process, giving developers the ability to detect when fonts are loaded and react accordingly. This can lead to performance optimizations and enhancements in the user experience by reducing the visibility of FOUT and FOIT.
Key Features of the CSS Font Loading API
Asynchronous font loading
Load fonts in the background without blocking the main thread, thereby improving page load times.
Font events
Listen for specific events related to font loading, such as when a font starts loading, finishes loading, or fails to load.
Font faces manipulation
Dynamically add or remove font faces from a document, enabling the dynamic application of fonts in response to user interactions or other conditions.
Font loading control
Control the font loading process, including the ability to check if specific fonts have loaded and to preload fonts before use.
Leading Practices and Considerations
When using the CSS Font Loading API, consider the following practices:
Fallback fonts
Always specify fallback fonts to ensure text remains readable in case custom fonts fail to load.
Performance
Use the API to load only the fonts needed for the current page or view, reducing unnecessary resource loading.
Error handling
Implement proper error handling to gracefully manage scenarios where font loading fails.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Font Loading API Demo</title>
<link rel="stylesheet" data-wphbdelayedstyle="style.css">
<script type="wphb-delay-type" src="fontloading.js"></script>
</head>
<body>
<h1>CSS Font Loading API Demo</h1>
<div class="custom-font">This is a text with a custom font.</div>
<script type="wphb-delay-type">
</script>
<script type="text/javascript" id="wphb-delayed-styles-js">
(function () {
const events = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend"];
function wphb_load_delayed_stylesheets() {
document.querySelectorAll("link[data-wphbdelayedstyle]").forEach(function (element) {
element.setAttribute("href", element.getAttribute("data-wphbdelayedstyle"));
}),
events.forEach(function (event) {
window.removeEventListener(event, wphb_load_delayed_stylesheets, { passive: true });
});
}
events.forEach(function (event) {
window.addEventListener(event, wphb_load_delayed_stylesheets, { passive: true });
});
})();
</script></body>
</html>
.custom-font {
font-family: 'Custom Font';
font-size: 24px;
}
// Delay the font loading by 3 seconds
setTimeout(() => {
// Create a new FontFace object
let customFont = new FontFace(
'Custom Font',
'url(ProtestRiot-Regular.woff2)'
);
// Add the new font to the document's font set
document.fonts.add(customFont);
// Load the font
customFont
.load()
.then(function () {
// The font is now loaded and can be used
document.querySelector('.custom-font').style.fontFamily = 'Custom Font';
})
.catch(function () {
console.log('Font failed to load');
});
}, 3000);
The CSS Font Loading API empowers developers to take charge of how fonts are loaded and applied on their web pages. By leveraging this API, we can provide a smoother and more controlled typographic experience, significantly improving the performance and user experience of our web applications. As with all powerful tools, use the CSS Font Loading API judiciously and in harmony with best practices to ensure that your web projects are both beautiful and performant.
