Gatsby-plugin-typography NPM

gatsby-plugin-typography

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

Install

npm install 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`,
      },
    },
  ],
}

Options

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.

gatsby gatsby-plugin typography typography.js

@babel/runtime

@studiobear/gatsby-theme-ionic @studiobear/gatsby-theme-blog gatsby-theme-contactless-menu gatsby-theme-bejamas-core test-theme-shawacademy @hesburgh-wse/gatsby-theme-marble @pojntfx-incubator/gatsby-tutorial-4 @everything-registry/sub-chunk-1722 @dfds-frontend/gatsby-theme @dschau/gatsby-theme-blog @dschau/gatsby-theme-workshop cf-gatsby-theme cf-gatsby-theme-new @gatsbyjs/gatsby-theme-website @getecho/gatsby-theme-echo try-gatsby @greatgatsbyjs/gatsby-theme-ggt-material-ui-blog react-virtuoso-site react-holiday sy7-blog surveyless visual-docs @kumarvaralakshmi/gatsby-theme-ghost @howtographql/gatsby-theme @hummingbird/gatsby-theme @novvum/base-theme gatsby-starter-blog gatsby-theme-90s gatsby-theme-admin-dashboard gatsby-theme-alice gatsby-theme-banshorian gatsby-theme-blog-ghost-casper gatsby-theme-bulma-core gatsby-theme-blog-typography gatsby-docs-starter gatsby-theme-minsbi gatsby-theme-jamfire-conference gatsby-theme-jules gatsby-theme-gutenberg gatsby-theme-monomer gatsby-theme-luchoster-base gatsby-theme-maximeheckel gatsby-theme-mbois gatsby-theme-mboisbos gatsby-opinionated-starter gatsby-theme-gatsbyjs-website gatsby-theme-ghost-casper gatsby-theme-graphcms-blog gatsby-theme-docs-system gatsby-theme-dashbored gatsby-theme-espt gatsby-theme-dev-blog gatsby-theme-cloudflare-docs gatsby-theme-consumer-site gatsby-theme-sylius gatsby-theme-prismic-starter graphql-blog @lucasterra7/gatsby-theme-docs gatsby-asphalt-theme @mnemonicorg/gatsby-theme-archive-site gatsby-hello-world-blog gatsby-markbook gatsby-theme-uyee gatsby-theme-podcast gatsby-theme-pawan-blog gatsby-theme-sales-site gatsbyjs-theme @kyrelldixon/gatsby-theme-wpgraphql-tabor @kjack/gatsby-theme-archive-site igor-portfolio-gatsby @dumppi/gatsby-theme-dumppi daudr-blog @jampile/gatsby-theme-conference @eggheadio/gatsby-theme-egghead-blog hive-honeycomb @zairon87/gatsby-theme-pixafy 10secondsofcode-custom 1kohei1 @wingscms/hummingbird @victoriabernard92/docs-theme @zalastax/nolb-gatsby-plugin-t mberneti @adamquadmon/gatsby-theme-lucifero @benjaminscholtens/gatsby-theme-fluid bart-van-der-waerden @codeanit.com/theme @christiandavid/gatsby-theme-byfolio @confluenza/gatsby-theme-confluenza

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

8 months ago

9 months ago

12 months ago

11 months ago

12 months ago

11 months ago

11 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

5.0.0-alpha-drupal-proxyurl.14

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

5.0.0-alpha-v5.d20221005t111511.35

2 years ago

5.2.0

1 year ago

5.3.0-next.0

1 year ago

5.3.0

1 year ago

5.0.0-alpha-v5.d20221012t101120.57

2 years ago

5.0.0-alpha-v5.d20221010t183635.51

2 years ago

5.0.0-alpha-v5.d20221007t081809.41

2 years ago

2 years ago

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

4.14.0-alpha-transformer-json.26

2 years ago

4.23.0-alpha-v5.26

2 years ago

4.24.0

2 years ago

5.0.0-alpha-v5.16

2 years ago

4.23.0-alpha-preview-gh-api.26

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

4.23.0-alpha-9689ff.25

2 years ago

4.23.0-next.0

2 years ago

4.23.0-alpha-a5-peer.70

2 years ago

4.23.0

2 years ago

4.23.0-alpha-a5-peer.69

2 years ago

4.22.0

2 years ago

4.25.0-next.0

2 years ago

4.21.0-next.0

2 years ago

4.15.0-alpha-wp-image-cdn-auth.48

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

4.18.0-alpha-drupal-self-reference.18

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

4.8.0-alpha-image-service.25

2 years ago

4.8.0-alpha-image-service.24

2 years ago

4.7.0

2 years ago

4.6.0-alpha-ts-jit.60

2 years ago

4.7.0-next.0

2 years ago

4.6.0

2 years ago

4.7.0-alpha-image-service.75

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3.14.0-alpha-qe-sm.46

3 years ago

4.0.0-alpha-9689ff.13

3 years ago

4.0.0-alpha-9689ff.36

3 years ago

4.0.0-alpha-9689ff.34

3 years ago

4.0.0-alpha-9689ff.8

3 years ago

4.0.0-alpha-9689ff.24

3 years ago

4.0.0-alpha-9689ff.22

3 years ago

4.0.0-alpha-9689ff.17

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4.0.0-alpha-9689ff.27

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2.7.0-image-helpers.58

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

2.4.3-unifiedroutes.76

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago