Gatsby: Typography Plugin Has No Effect (Tutorial #2)

[geirman]

Stepping through part 2 of your tutorial, I believe I followed the directions correctly, but changing the baseFontSize has no effect.

Here's what I've got...

// /gatsby-config.js
module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography.js`
      }
    }
  ]
};

// src/utils/typography.js
import Typography from 'typography';

const typography = new Typography({ baseFontSize: '10px' });

export default typography;

I am seeing the typography.js style included

NOTE: I did not create a new site as the tutorial suggests. I instead continued from the previous tutorial (step-1). And I used the default gatsby new <sitename> for that one as well. I'd be surprised if this has anything to do with it, but mention it just in case. I have restarted gatsby develop many times after ctrl C to stop the server.

I'm not sure how to troubleshoot this, so that might be a nice thing to add to the tutorial.

[KyleAMathews]

It does have an effect since the default starter includes its own CSS which is applied after the plugin.

[geirman]

Ah, so it does

[kavanLi]

what? how can I solve this same problem? I am a junior, can you explain something details?
is that mean BaseFontSize is working. but other css cover it after gatsby develop?

---

got it! BaseFontSize is working.

don't use below command for tutorial 2:
gatsby new gatsby-site
because, this cli integrate some other things that I don't konw.

for junior best use command:
gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-world
to learnig.

less setting have done on this command.

[tsmith123]

I get the same issues after using gatsby new gatsby-site even though I have deleted the index.css file from layouts. I have the same typography.js file and I also see the style id reference for it.

Whenever I change baseFontSize there is no effect. I've tried deleting the cache folder and I've run gatsby develop many times to force the changes but no luck.

[KyleAMathews]

Hey, there was a bug recently with typography that causes this. Try upgrading typography to the latest version.

[mcmillhj]

I had an issue where I replaced the starter css with a css reset that included font-size: 100% and font: inherit. This overwrote the font styles from Typography.js and was pretty difficult to track down.

Just a heads up for future finders of this issue :)

[chrismaltais]

Hey there,

It seems like some fonts work when I configure typography.js and others don't.

Code Used:

typography.js:

import Typography from "typography"

const typography = new Typography({
    baseFontSize: "24px",
    headerFontFamily: ["Helvetica"],
    bodyFontFamily: ["Oxygen Mono"],
});

export default typography

gatsby-config.js:

module.exports = {
  siteMetadata: {
     title: 'Chris Maltais',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography.js`,
      },
    },
  ],
};

Start template:
gatsby-starter-default

Library versions:
typography: 0.16.17
gatsby-plugin-typography: 1.7.19

I've also commented out the import to ./index.css in src/layouts/index.js.

Result:

The Helvetica font will work, however the Oxygen Mono will not. In fact, any font with "Mono" in the name does not.

Am I missing something? Do typography themes contain different fonts? Any help is appreciated.

[sangzc]

I had an issue where I replaced the starter css with a css reset that included font-size: 100% and font: inherit. This overwrote the font styles from Typography.js and was pretty difficult to track down.

Just a heads up for future finders of this issue :)

This solved it for me. Thank you!