0
233
ViewsReact CRA: precargar fuentes desde la carpeta de fuentes
Estoy usando reaccionar y usando fuentes personalizadas a través de SCSS como:
@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; } pero llego a ver este problema en el faro 
Solo puedo usar precarga en un enlace porque esta no es una fuente alojada y, por lo tanto, los archivos de fuente también se codifican en la compilación.
1 answers
Answer question0
Para hacerlo, debe dividir el archivo de fuente fuera de la compilación SCSS, por ejemplo, puede configurarlo dentro de HTML público en el directorio de fonts y usarlo. (Lo hago por algunos de los recursos externos y su trabajo)
ahora cómo puedes hacer eso: (Ejemplo)
<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>y luego puedes agregar:
@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; }O puede mover fuentes y CSS para estas fuentes al directorio HTML público y agregar precarga directa en index.html
O puede agregar a index.html: <link rel="preload" href="yourFont.woff2" as="font" />