Gatsby Plugin Typography

Gatsby Plugin Typography is a plugin for the Gatsby static site generator that allows you to easily add typography to your website without having to write CSS by hand. The plugin is built on Typography.js, a typography library written in JavaScript.

Features

The main feature of Gatsby Plugin Typography is the ability to easily add global typography styles to your website. You can choose from a number of pre-built typography themes, or you can create your own custom theme. The plugin also has a number of advanced features, such as the ability to adjust line heights, font scaling, and more.

Installation

To install Gatsby Plugin Typography, first install it using your favorite package manager:

npm install gatsby-plugin-typography

Or:

yarn add gatsby-plugin-typography

Usage

In order to use Gatsby Plugin Typography, you need to add it to your list of plugins in your gatsby-config.js file. Here is an example gatsby-config.js file with the plugin added:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography.js`,
      },
    },
  ],
}

In this example, the pathToConfigModule option specifies the path to the typography configuration file. Here is an example typography.js file:

import Typography from "typography"
import altonTheme from "typography-theme-alton"

const typography = new Typography(altonTheme)

export default typography

In this example, we are using the alton typography theme. You can find more typography themes and customize your own typography theme on the typography.js website.

Conclusion

Gatsby Plugin Typography is a powerful and easy-to-use tool for adding global typography styles to your website. With its built-in themes and advanced customization options, it's a great choice for developers who want to add beautiful typography to their websites without having to write CSS by hand.