CursosEmpresasBlogLiveConfPrecios

Instalación y configuración de plugins

Clase 16 de 33 • Curso de Desarrollo de Aplicaciones Web con Gatsby JS

Resumen

Vamos a usar el plugin gatsby-plugin-typography para manejar las fuentes de nuestro proyecto. Recuerda que este plugin nos ayuda a integrar la librería Typography.js, por lo que debemos instalar el plugin y la librería base.

Dato curioso: Esta librería fue creada por Kyle Mathews, uno de los creadores y desarrolladores de Gatsby.

Instalación:

npm install gatsby-plugin-typography react-typography typography

Configuración:

// gatsby-config.js
module.exports = {
  siteMetadata: { /* ... */ },
  plugins: [
    /* ... */
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    }
    /* ... */
  ],
};
// src/utils/typography.js
import Typography from 'typography';

const typography = new Typography({
  baseFontSize: "18px",
  baseLineHeight: 1.666,
  headerFontFamily: ["Lato", "Helvetica Neue", "Arial"],
  bodyFontFamily: ["Open Sans", "Roboto", "Georgia"],
});

export default typography;

Con esta configuración asignamos tamaños y fuentes personalizadas diferentes para nuestros elementos. Los estilos cambiarán dependiendo de dónde estén: Todos los elementos dentro del <body> usarán Open Sans, pero los elementos del <header> tendrán estilos diferentes y la fuente será Lato.