To get accurate measurements of a DOM element, it is important to ensure the web fonts are loaded if using them. This is because variations in font size can lead to differences in the width of an element. The document.fonts.ready is a promise that resolves once all fonts have been loaded.

document.fonts.ready.then((fontFaceSet) => {
  // We can now be certain that the fonts have been loaded
  setAreFontsLoaded(true)

  // The return value is a FontFaceSet,
  // which can be used to get additional information about the fonts
  const fontFaces = [...fontFaceSet];
  console.log(fontFaces);
})