A Gatsby plugin for utilizing the Typography library with minimal configuration.
npm install --save gatsby-plugin-typography react-typography typography
Why to use
typography.js file utilizing one of its themes might look like this:
const typography = grandViewTheme// Export helper functionsconst scale rhythm options = 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.
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.jsmoduleexports =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
gatsby-plugin-typographyskip the inclusion of this helper. You will have to include the appropriate fonts yourself.