Property 'add' does not exist on type 'FontFaceSet'

Question

I'm following the Adding a font to a document or worker from the developer mozilla website.

This is the code they're sharing

// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)", {
  style: "italic",
  weight: "400",
  stretch: "condensed",
});

// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);

But when I do exactly that, in my Angular app, I receive the following error

Property 'add' does not exist on type 'FontFaceSet'.

Does somebody found a solution to it ?

My stack

This seems to be a typescript error.

• "typescript": "^5.3.3"

Answer 1

Check if you're missing the dom.iterable lib — TypeScript needs it to understand that FontFaceSet is actually an iterable set.

To fix this, add the dom.iterable lib to your tsconfig.json's lib entry:

// tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable"]
  }
}

TypeScript should now be able to compile without errors.