es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Utiliza fuentes locales con Gatsby 4 y Emotion.

31 Jul, 2023 Programación

Estoy intentando usar una fuente local en Gatsby 4 y Emotion. Emotion está configurado correctamente, ya que lo estoy usando para otros estilos.

Para lograr esto, he seguido esta guía: https://www.gatsbyjs.com/docs/recipes/styling-css/#adding-a-local-font

Entonces he creado la carpeta src/fonts, he colocado mis fuentes allí y las he definido en el CSS de Emotion:

export const defaultStyles = (theme: Theme) => css`
  @font-face {
    font-family: 'PT Sans';
    src: url('../fonts/pt-sans-v12-latin-ext_latin-regular.eot');
    src: local(''), url('../fonts/pt-sans-v12-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'),
      url('../fonts/pt-sans-v12-latin-ext_latin-regular.woff2') format('woff2'),
      url('../fonts/pt-sans-v12-latin-ext_latin-regular.woff') format('woff'),
      url('../fonts/pt-sans-v12-latin-ext_latin-regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
  }
`;

En mi componente de diseño, estoy declarando esto como un estilo global:

<global styles="{defaultStyles}"></global>

Desafortunadamente, las fuentes no se copian en la salida de Gatsby al ejecutar gatsby develop o gatsby build, por lo tanto, el navegador no puede encontrarlas y mostrarlas.

¿Cómo puedo hacer que Gatsby detecte las fuentes dentro de Emotion CSS y las copie?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que Gatsby detecte las fuentes dentro de Emotion CSS y las copie en la salida, debes indicar a Gatsby que incluya la carpeta src/fonts en el proceso de construcción configurando el complemento gatsby-source-filesystem en gatsby-config.js. Agrega el siguiente código al arreglo de complementos:

    {
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `fonts`,
    path: `${__dirname}/src/fonts/`,
  },
},

    Esto indica a Gatsby que incluya la carpeta src/fonts y su contenido en el proceso de construcción.

    A continuación, debes asegurarte de que las fuentes estén correctamente referenciadas en tu Emotion CSS. En lugar de utilizar rutas relativas (../fonts/), debes utilizar la función file() proporcionada por Emotion, que resuelve la ruta en relación a la carpeta src. Por ejemplo:

    export const defaultStyles = (theme: Theme) => css`
  @font-face {
    font-family: 'PT Sans';
    src: local(''), file('fonts/pt-sans-v12-latin-ext_latin-regular.eot') format('embedded-opentype'),
      file('fonts/pt-sans-v12-latin-ext_latin-regular.woff2') format('woff2'),
      file('fonts/pt-sans-v12-latin-ext_latin-regular.woff') format('woff'),
      file('fonts/pt-sans-v12-latin-ext_latin-regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
  }
`;

    Ahora, cuando ejecutes gatsby develop o gatsby build, Gatsby debería copiar correctamente las fuentes en la salida y el navegador debería poder mostrarlas.

Comments are closed.