¿Cómo agregar fuentes a proyectos basados ​​en create-react-app?

Resuelto Maxim Veksler asked hace 7 años • 12 respuestas

Estoy usando create-react-app y prefiero no hacerlo eject.

No está claro dónde deben ir las fuentes importadas a través de @font-face y cargadas localmente.

Es decir, estoy cargando

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
}

¿Alguna sugerencia?

-- EDITAR

Incluyendo la esencia a la que Dan se refiere en su respuesta.

➜  Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts
total 1168
-rwxr-xr-x@ 1 maximveksler  staff  62676 Mar 17  2014 MYRIADPRO-BOLD.woff
-rwxr-xr-x@ 1 maximveksler  staff  61500 Mar 17  2014 MYRIADPRO-BOLDCOND.woff
-rwxr-xr-x@ 1 maximveksler  staff  66024 Mar 17  2014 MYRIADPRO-BOLDCONDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  66108 Mar 17  2014 MYRIADPRO-BOLDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  60044 Mar 17  2014 MYRIADPRO-COND.woff
-rwxr-xr-x@ 1 maximveksler  staff  64656 Mar 17  2014 MYRIADPRO-CONDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  61848 Mar 17  2014 MYRIADPRO-REGULAR.woff
-rwxr-xr-x@ 1 maximveksler  staff  62448 Mar 17  2014 MYRIADPRO-SEMIBOLD.woff
-rwxr-xr-x@ 1 maximveksler  staff  66232 Mar 17  2014 MYRIADPRO-SEMIBOLDIT.woff
➜  Client git:(feature/trivia-game-ui-2) ✗ cat src/containers/GameModule.css
.GameModule {
  padding: 15px;
}

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-REGULAR.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-COND.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Semibold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Semibold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-CONDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCONDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCOND.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLD.woff') format('woff');
}
Maxim Veksler avatar Jan 16 '17 19:01 Maxim Veksler
Aceptado

Hay dos opciones:

Usando importaciones

Esta es la opción sugerida. Garantiza que sus fuentes pasen por el proceso de compilación, obtengan hashes 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 importar un archivo CSS desde JS. Por ejemplo, por defecto src/index.jsimporta 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 src/fonts/MyFont.woff, index.csspodrías incluir esto:

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
  /* other formats include: 'woff2', 'truetype, 'opentype',
                            'embedded-opentype', and 'svg' */
}

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 (con tecnología de Webpack) a descubrir este archivo.

Normalmente esto debería ser suficiente.

Usando publiccarpeta

Si por alguna razón prefiere no utilizar la canalización de compilación y hacerlo de la “forma clásica”, puede usar la publiccarpeta y colocar sus fuentes allí.

La desventaja de este enfoque es que los archivos no obtienen hashes cuando se compilan para producción, por lo que tendrás que actualizar sus nombres cada vez que los cambies, o los navegadores guardarán en caché las versiones antiguas.

Si desea hacerlo de esta manera, coloque las fuentes en algún lugar de la publiccarpeta, por ejemplo, en public/fonts/MyFont.woff. Si sigue este enfoque, publictambién debe colocar los archivos CSS en una carpeta y no importarlos desde JS porque mezclar estos enfoques será muy confuso. Entonces, si aún quieres hacerlo, tendrás 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="%PUBLIC_URL%/index.css">

Y dentro de él, usarías la notación CSS normal:

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(fonts/MyFont.woff) format('woff');
}

Observe cómo lo estoy usando fonts/MyFont.woffcomo camino. Esto se debe a que index.cssestá en la publiccarpeta, por lo que se entregará desde la ruta pública (generalmente es la raíz del servidor, pero si implementa en GitHub Pages y configura su homepagecampo en http://myuser.github.io/myproject, se entregará desde /myproject). Sin embargo fonts, también están en la publiccarpeta, por lo que se entregarán fontsrelativamente (ya sea http://mywebsite.example/fontso http://myuser.github.io/myproject/fonts). Por lo tanto utilizamos la ruta relativa.

Tenga en cuenta que, dado que en este ejemplo evitamos la canalización de compilación, no verifica que el archivo realmente exista. Por eso no recomiendo este enfoque. Otro problema es que nuestro index.cssarchivo no se minimiza ni obtiene un hash. Por lo tanto, será más lento para los usuarios finales y se corre el riesgo de que los navegadores almacenen en caché versiones antiguas del archivo.

 ¿Qué forma utilizar?

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.

Dan Abramov avatar Jan 16 '2017 14:01 Dan Abramov

Aquí hay algunas formas de hacer esto:

1. Importar 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, puedes ir a fonts.google.com donde puedes encontrar enlaces que puedes poner en tupublic/index.html

captura de pantalla de fonts.google.com

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 en 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 al fontsdirectorio en su srcdirectorio

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 ttfel formato, debes mencionar format('truetype'). Para woff,format('woff')

Ahora puedes usar la fuente en las clases.

.modal-title {
    font-family: Lato, Arial, serif;
    font-weight: black;
}

4. Usando el 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']
   }
});
sudo bangbang avatar Sep 18 '2018 18:09 sudo bangbang
  1. Vaya a Fuentes de Google https://fonts.google.com/
  2. Seleccione su fuente como se muestra en la imagen a continuación:

ingrese la descripción de la imagen aquí

  1. Copie y luego pegue esa URL en una 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=Arroz+picante

Se abrirá así:

ingrese la descripción de la imagen aquí

4. Copie y pegue ese código en su style.css y simplemente comience a usar esa fuente de esta manera:

      <Typography
          variant="h1"
          gutterBottom
          style={{ fontFamily: "Spicy Rice", color: "pink" }}
        >
          React Rock
        </Typography>

Resultado:

ingrese la descripción de la imagen aquí

Hitesh Sahu avatar Nov 09 '2018 16:11 Hitesh Sahu

Cuando utilice diferentes archivos de fuentes para normal/cursiva, es posible font-styleque la forma de especificar @font-facedeba ser diferente según el punto de entrada. Vea mi respuesta aquí :

  1. Si elige vincular el cssarchivo directamente a su public/index.htmlentonces puede usarlo font-facenormalmente con un font-familynombre y diferente font-style:
@font-face {
  font-family: "FontName"; <---
  font-style: normal; <---
  font-weight: normal;
  src: url("path-to-assets/fonts/FontName.ttf") format("truetype");
}
@font-face {
  font-family: "FontName"; <---
  font-style: italic; <---
  font-weight: normal;
  src: url("path-to-assets/fonts/FontName-Italic.ttf") format("truetype");
}

/* Usage */
.text {
  font-family: FontName;
  font-style: normal;
}
.text-italic {
  font-family: FontName;
  font-style: italic;
}
  1. Si elige vincular el cssarchivo a través de Js para agruparlo, deberá tener un font-familynombre diferente para todas sus italicfuentes y usar font-styleel modo normal.
@font-face {
  font-family: "FontName"; <---
  font-style: normal; <---
  font-weight: normal; /* normal | 300 | 400 | 600 | bold | etc */
  src: url("path-to-assets/fonts/FontName.ttf") format("truetype");
}
@font-face {
  font-family: "FontNameItalic";
  font-style: normal; <----
  font-weight: normal; /* normal | 300 | 400 | 600 | bold | etc */
  src: url("path-to-assets/fonts/FontName-Italic.ttf") format("truetype");
}

/* Usage */
.text {
  font-family: FontName;
}
.text-italic {
  font-family: FontNameItalic;
}
piouson avatar May 25 '2021 08:05 piouson

Las fuentes locales que se vinculan a su reacción js pueden ser un error. Por lo tanto, prefiero usar un archivo CSS en línea de Google para vincular fuentes. Consulte el siguiente código,

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

o

<style>
    @import url('https://fonts.googleapis.com/css?family=Roboto');
</style>
Codemaker2015 avatar Aug 16 '2020 15:08 Codemaker2015