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

Hay dos opciones:

Utilizando importaciones

Esta es la opción sugerida. Garantiza que sus fuentes pasen por la canalización 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 hojas de estilo a las fuentes", necesita tener un archivo CSS importado de JS. Por ejemplo, por defecto src/index.js importa src/index.css:

import './index.css';

Un archivo CSS como este va a través de la canalización 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 (con tecnología de Webpack) a descubrir este archivo.

Normalmente esto debería ser suficiente.

Usando la carpeta public

Si por alguna razón prefieres no usar la canalización de compilación, y en su lugar hazlo de la siguiente manera: "forma clásica", puede utilizar la carpeta public y poner sus fuentes allí.

La desventaja de este enfoque es que los archivos no obtienen hashes cuando compila 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 de la carpeta public, por ejemplo, en public/fonts/MyFont.woff. Si sigue este enfoque, también debe poner archivos CSS en la carpeta public y no importarlos desde JS porque mezclar estos enfoques va a ser muy confuso. Por lo tanto, si todavía desea hacerlo, tendría un archivo como public/index.css. Tendrías que añadir manualmente <link> a esta hoja de estilos desde public/index.html:

<link rel="stylesheet" href="%PUBLIC_URL%/index.css">

Y dentro de ella, usarías la notación CSS regular:

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

Observe cómo estoy usando fonts/MyFont.woff como el camino. Esto se debe a que index.css está en la carpeta public por lo que se servirá desde la ruta pública (generalmente es la raíz del servidor, pero si despliega en las páginas de GitHub y establece tu campo homepage en http://myuser.github.io/myproject, se servirá desde /myproject). Sin embargo, fonts también están en la carpeta public, 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 el camino relativo.

Tenga en cuenta que ya que estamos evitando la canalización de compilación en este ejemplo, no verifica que el archivo realmente exista. Es por eso que no recomiendo este enfoque. Otro problema es que nuestro archivo index.css no se minimiza y no obtener un hash. Así que va a ser más lento para los usuarios finales, y corre el riesgo de que los navegadores almacenen en caché versiones antiguas del archivo.

¿Qué Manera de Usar?

Vaya con el primer método ("Usando 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 trabajando en algún tema.