I have a collection of FontFace objects stored in a file called fonts/myFonts.js:
const fontFaces = [
new FontFace('MyFont', "url('local/location.woff2') format('woff2')", {
weight: '400',
style: 'normal',
...
}),
...
]
fontFaces.forEach((f) => document.fonts.add(f)); // Is this the right approach?
Now, I am attempting to include these in the header section of my pages/_document.tsx:
class MyDocument extends Document {
render = () => (
<Html>
<Head>
<script src="../fonts/myFonts.js" async />
...
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
However, it appears that this method is not achieving the desired result:
- Browser console indicates that
fonts/myFonts.jscannot be located - Even if it was found - is this the correct way to proceed? Should I be waiting for the fonts to finish loading?