Typography

Installing the Typography plugin

$ npm install gatsby-plugin-typography react-typography typography --save

Enable Typography plugin

• Edit gatsby-config.js and add the following lines between plugins: [ ... ]:

{
  resolve: `gatsby-plugin-typography`,
  options: {
    pathToConfigModule: `src/utils/typography`,
  }
}

Create Typography configuration file

• Create and edit the file src/utils/typography.js

import Typography from "typography"
const typography = new Typography({
  baseFontSize: "18px",
  baseLineHeight: 1.666,
  headerFontFamily: ["Avenir Next","Helvetica Neue","Segoe UI","Helvetica","Arial","sans-serif",],
  bodyFontFamily: ["Georgia", "serif"],
})
export default typography

Installing Typography themes

You can check all Typography themes here.

$ npm install typography-theme-funston --save

Create Typography configuration file for themes

• Create and edit the file src/utils/typography.js

import Typography from "typography";
import funstonTheme from 'typography-theme-funston'
const typography = new Typography(
  funstonTheme
);
export default typography;