trying to use these fonts in sveltekit but not working, other fonts seem to be working, it should work I tested them using in nextjs app by loading with localFont(nextjs specific) so this fonts are not broken,
Tried to define font family in css file, like so:
@font-face { font-family: 'P1'; src: url('/fonts/quran/pages/p1.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap;}tried it by defining in tailwind config and in inline style also style="font-family: P1;", didn't work
Tried loading with js like below which also didn't work though I see the font is being added to document.fonts and setting font-family to the target element:
export const loadQuranPageFont = async (pageNumber: number) => { const fontName = `quran-page-${pageNumber}`; const fontUrl = `/fonts/quran/pages/p${pageNumber}.woff2`; // 'fonts' is located in the static folder, also tried to put inside 'src/lib' folder and call it like '$lib/fonts/..' either didn't make difference const fontFace = new FontFace(fontName, `url(${fontUrl})`); try { // Load and add the font const loadedFont = await fontFace.load(); document.fonts.add(loadedFont); // Set the CSS variable for use const element = document.getElementById('quran'); element.style.fontFamily = fontName; console.log(`Font for page ${pageNumber} loaded and set to CSS variable.`); } catch (err) { console.error("[Couldn't load font]: ", err); }};