Solución:
Hay dos opciones:
Usar importaciones
Ésta es la opción sugerida. Garantiza que sus fuentes pasen por la canalización de compilación, obtengan hash durante la compilación para que el almacenamiento en caché del navegador funcione correctamente y que obtenga errores de compilación si faltan los archivos.
Como se describe en “Agregar imágenes, fuentes y archivos”, debe tener un archivo CSS importado desde JS. Por ejemplo, por defecto src/index.js importaciones src/index.css:
import './index.css';
Un archivo CSS como este pasa por el proceso de compilación y puede hacer referencia a fuentes e imágenes. Por ejemplo, si pones una fuente en src/fonts/MyFont.woff, tu index.css podría incluir esto:
@font-face {
font-family: 'MyFont';
src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
}
Observe cómo estamos usando una ruta relativa que comienza con ./. Esta es una notación especial que ayuda a la canalización de compilación (impulsada por Webpack) a descubrir este archivo.
Normalmente esto debería ser suficiente.
Utilizando public Carpeta
Si por alguna razón prefieres no para utilizar la canalización de compilación y, en su lugar, hacerlo de la “forma clásica”, puede utilizar la public carpeta y coloque sus fuentes allí.
La desventaja de este enfoque es que los archivos no obtienen valores hash cuando se compilan para producción, por lo que tendrá que actualizar sus nombres cada vez que los cambie, o los navegadores almacenarán en caché las versiones anteriores.
Si desea hacerlo de esta manera, coloque las fuentes en algún lugar del public carpeta, por ejemplo, en public/fonts/MyFont.woff. Si sigue este enfoque, debe colocar los archivos CSS en public carpeta también y no impórtelos desde JS porque mezclar estos enfoques será muy confuso. Entonces, si aún desea hacerlo, tendrá un archivo como public/index.css. Tendrías que agregar manualmente <link> a esta hoja de estilo desde public/index.html:
<link rel="stylesheet" href="https://foroayuda.es/%PUBLIC_URL%/index.css">
Y dentro de él, usaría la notación CSS normal:
@font-face {
font-family: 'MyFont';
src: local('MyFont'), url(fonts/MyFont.woff) format('woff');
}
Note como estoy usando fonts/MyFont.woff como el camino. Esto es porque index.css está en el public carpeta para que se sirva desde la ruta pública (generalmente es la raíz del servidor, pero si implementa en las páginas de GitHub y establece su homepage campo a http://myuser.github.io/myproject, será servido desde /myproject). Sin embargo fonts también están en el public carpeta, por lo que se servirán desde fonts relativamente (ya sea http://mywebsite.com/fonts o http://myuser.github.io/myproject/fonts). Por lo tanto usamos la ruta relativa.
Tenga en cuenta que, dado que estamos evitando la canalización de compilación en este ejemplo, no verifica que el archivo realmente exista. Por eso no recomiendo este enfoque. Otro problema es que nuestro index.css el archivo no se minimiza y no obtiene un hash. Por lo tanto, será más lento para los usuarios finales y corre el riesgo de que los navegadores almacenen en caché versiones antiguas del archivo.
¿Qué forma de usar?
Vaya con el primer método (“Uso de importaciones”). Solo describí el segundo ya que eso es lo que intentaste hacer (a juzgar por tu comentario), pero tiene muchos problemas y solo debería ser el último recurso cuando estás solucionando algún problema.
Aquí hay algunas formas de hacer esto:
1. Importación de fuente
Por ejemplo, para usar Roboto, instale el paquete usando
yarn add typeface-roboto
o
npm install typeface-roboto --save
En index.js:
import "typeface-roboto";
Hay paquetes npm para muchas fuentes de código abierto y la mayoría de las fuentes de Google. Puedes ver todas las fuentes aquí. Todos los paquetes son de ese proyecto.
2. Para fuentes alojadas por terceros
Por ejemplo, fuentes de Google, puede ir a fonts.google.com donde puede encontrar enlaces que puede colocar en su public/index.html
Será como
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
o
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat');
</style>
3. Descargar la fuente y agregarla a su código fuente.
Descarga la fuente. Por ejemplo, para las fuentes de Google, puede ir a fonts.google.com. Haga clic en el botón de descarga para descargar la fuente.
Mueva la fuente a fonts directorio en tu src directorio
src
|
`----fonts
| |
| `-Lato/Lato-Black.ttf
| -Lato/Lato-BlackItalic.ttf
| -Lato/Lato-Bold.ttf
| -Lato/Lato-BoldItalic.ttf
| -Lato/Lato-Italic.ttf
| -Lato/Lato-Light.ttf
| -Lato/Lato-LightItalic.ttf
| -Lato/Lato-Regular.ttf
| -Lato/Lato-Thin.ttf
| -Lato/Lato-ThinItalic.ttf
|
`----App.css
Ahora en App.css, Agrega esto
@font-face {
font-family: 'Lato';
src: local('Lato'), url(./fonts/Lato-Regular.otf) format('opentype');
}
@font-face {
font-family: 'Lato';
font-weight: 900;
src: local('Lato'), url(./fonts/Lato-Bold.otf) format('opentype');
}
@font-face {
font-family: 'Lato';
font-weight: 900;
src: local('Lato'), url(./fonts/Lato-Black.otf) format('opentype');
}
Para ttf formato, tienes que mencionar format('truetype'). Para woff, format('woff')
Ahora puedes usar la fuente en clases.
.modal-title {
font-family: Lato, Arial, serif;
font-weight: black;
}
4. Uso del paquete web-font-loader
Instalar el paquete usando
yarn add webfontloader
o
npm install webfontloader --save
En src/index.js, puede importar esto y especificar las fuentes necesarias
import WebFont from 'webfontloader';
WebFont.load({
google: {
families: ['Titillium Web:300,400,700', 'sans-serif']
}
});
- Vaya a Google Fonts https://fonts.google.com/
- Seleccione su fuente como se muestra en la imagen a continuación:
- Copie y luego pegue esa URL en la nueva pestaña y obtendrá el código css para agregar esa fuente. En este caso si vas a
https://fonts.googleapis.com/css?family=Spicy+Rice
Se abrirá así:
4, copie y pegue ese código en su style.css y simplemente comience a usar esa fuente así:
<Typography
variant="h1"
gutterBottom
style={{ fontFamily: "Spicy Rice", color: "pink" }}
>
React Rock
</Typography>
Resultado:
