javascripttypescriptfont-face

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


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.


Solution

  • 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.