Web API CSS Font Loading

Last Updated : 23 Nov, 2023

Web API CSS Font Loading is used to add CSS styles on web pages. It handles the dynamic change which occurs on the web page. We can create a @font-face rule and can add any kind of CSS that we want to load on a page. It also helps in not delaying the styling on the web page. It has many features like FontFace.status which can set the status for loading of FontFace.

Web API CSS Font Loading Interfaces

FontFace: It represents the font face.
FontFaceSet: It checks for the download statuses of loading font faces.
FontFaceSetLoadEvent: Invoked whenever a FontFaceSet loads.

Web API CSS Font Loading Properties

Document.fonts: It returns the FontFaceSet interface of the document.
WorkerGlobalScope.fonts: It returns the FontFaceSet interface of the worker.

Web API CSS Font Loading Events

fontFaceSet.loading: It fires when the document starts loading the fonts. It is the same as the js property addEventListener.
FontFaceSet.loadingdone: It fires when the document has loaded all the fonts.
fontFaceSet.loadingerror: It fires when the loading of font has finished and some of them are not able to load properly.

Example: In this example, we are loading a font and applying all the events of FontFaceSet.

Javascript

const result = document.getElementById("result");
 
const canvas = document.getElementById("js-canvas");
canvas.width = 650;
canvas.height = 75;
const ctx = canvas.getContext("2d");
 
const oxygenFontFace = new FontFace(
    "FontFamily Kdam Thmor Pro",
    "url(
https://fonts.googleapis.com/css2?family=Vina+Sans&display=swap)",
);
document.fonts.add(oxygenFontFace);
result.textContent += 
    `font status: ${oxygenFontFace.status}\n`;
 
document.fonts.load("36px FontFamily Oxygen").then(
    (fonts) => {
        result.textContent += 
            `Bitter font: ${fonts}\n`;
        result.textContent += 
            `Bitter font: ${oxygenFontFace.status}\n`;
        ctx.font = '36px "FontFamily Oxygen"';
        ctx.fillText(" Kdam Thmor Pro font loaded", 20, 50);
    },
    (err) => {
        console.error(err);
    },
);
 
document.fonts.addEventListener("loading", (event) => {
    result.textContent += 
        `loading_event: ${event.fontfaces.length}\n`;
});
document.fonts.addEventListener("loadingerror", (event) => {
    result.textContent += 
        `loadingerror_event: ${event.fontfaces.length}\n`;
});
document.fonts.addEventListener("loadingdone", (event) => {
    result.textContent += 
        `loadingdone_event: ${event.fontfaces.length}\n`;
    event.fontfaces.forEach((value) => {
        result.textContent += 
            `  fontface: ${value.family}\n`;
    });
});
 
document.fonts.ready.then(function () {
    result.textContent += 
        `\nFontFaces in document: ${document.fonts.size}.\n`;
 
    for (const fontFace of document.fonts.values()) {
        result.textContent += "FontFace:\n";
        for (const property in fontFace) {
            result.textContent += 
                `  ${property}: ${fontFace[property]}\n`;
        }
    }
});

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <canvas id="js-canvas"></canvas>
    <textarea id="result" rows="30"
              cols="50">
      </textarea>
</body>
 
</html>

Output:

Output

Browser compatibility:

Chrome
Edge
Firefox
Opera
Safari

Suggest improvement

CSS Web Safe Fonts

Share your thoughts in the comments