0
230
ViewsReact CRA: Preload fonts from fonts folder
I am using react and using custom fonts via SCSS as:
@font-face {
font-family: 'FiraGO Bold';
src: url('../../fonts/FiraGO-Bold.woff2') format('woff2'),
url('../../fonts/FiraGO-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'FiraGO Medium';
src: url('../../fonts/FiraGO-Medium.woff2') format('woff2'),
url('../../fonts/FiraGO-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'FiraGO';
src: url('../../fonts/FiraGO-Regular.woff2') format('woff2'),
url('../../fonts/FiraGO-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
// Fonts
:root {
--font-base: 'FiraGO', sans-serif;
--font-bold: 'FiraGO Bold', sans-serif;
--font-medium: 'FiraGO Medium', sans-serif;
}
but I get to see this issue on the lighthouse
I can just use preload in a link because this is not a hosted font and hence the font files are also hashed in the build.
·
Juan Pablo Isaza
1 answers
Answer question0
To do that you need to split the font file outside the SCSS build, for example, you can set it inside public HTML in the fonts directory and use it. (I do that for some of the external recourse and its work)
now how you can do that: (Example)
<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>
and then you can add:
@font-face {
font-family: 'ciclefina';
src: url('fonts/cicle_fina-webfont.eot');
src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/cicle_fina-webfont.woff2') format('woff2'),
url('fonts/cicle_fina-webfont.woff') format('woff'),
url('fonts/cicle_fina-webfont.ttf') format('truetype'),
url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
font-weight: normal;
font-style: normal;
}
Or you can move fonts and CSS for these fonts to the public HTML directory and add preload direct in index.html
Or you can add to index.html: <link rel="preload" href="yourFont.woff2" as="font" />
·
Juan Pablo Isaza
Report
Answer question