Web API CSS Font Loading

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`;
        }
    }
});