Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gatsby-plugin-typography with all npm packages installed. Try it out:

require("gatsby/package.json"); // gatsby is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. require("react-typography/package.json"); // react-typography is a peer dependency. require("typography/package.json"); // typography is a peer dependency. var gatsbyPluginTypography = require("gatsby-plugin-typography")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gatsby-plugin-typography v2.3.2

Gatsby plugin to setup server rendering of Typography.js' CSS


A Gatsby plugin for utilizing the Typography library with minimal configuration.

See it in action in the Tutorial (source)


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

Why to use

A typical typography.js file utilizing one of its themes might look like this:

import Typography from "typography"
import grandViewTheme from "typography-theme-grand-view"

const typography = new Typography(grandViewTheme)

// Export helper functions
export const { scale, rhythm, options } = typography
export default typography

You then have to take the exported stylesheets and inline them in your entry file. Since a theme comes with two fonts, you also have to make sure you have the fonts available somehow.

By using gatsby-plugin-typography and specifying the path to your typography.js file via the pathToConfigModule option (see below), the inclusion of your typography styles and any relevant fonts is taken care of by a pair of helper methods under the hood, keeping your typography-related config in a single location and your entry file sparse.

How to use

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


  • pathToConfigModule: (string) The path to the file in which you export your typography configuration.
  • omitGoogleFont: (boolean, default: false) Typography includes a helper that makes a request to Google's font CDN for the fonts you need. You might, however, want to inject the fonts into JS or use a CDN of your choosing. Setting this value to true will make gatsby-plugin-typography skip the inclusion of this helper. You will have to include the appropriate fonts yourself.
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free