funston-theme seems to be the only part of typography.js that works for me

[bchehraz]

I am following the basic directions as part of the GatsbyJS Docs instructions on how to use Typography.js in Gatsby. Luckily, the funston-theme seems to be working 100% properly, while any other theme seems to render nothing different to the screen and resorts to the default font that is set.

No other themes seem to work. Even the code below (without theme) seems to do nothing different as well.

import Typography from 'typography';

const typography = new Typography({
  baseFontSize: '18px',
  baseLineHeight: 1.666,
  headerFontFamily: [
    'Avenir Next',
    'Helvetica Neue',
    'Segoe UI',
    'Helvetica',
    'Arial',
    'sans-serif',
  ],
  bodyFontFamily: ['Georgia', 'serif'],
});

export default typography;

However, this code is the only thing that seems to work and actually changes the fonts on the website-

import Typography from 'typography';
import funstonTheme from 'typography-theme-funston';

const typography = new Typography(
  funstonTheme,
);

export default typography;

I know this isn't putting into context my entire project, but any idea on what I could be doing wrong?

I also tend to use styled-components quite a bit on my project, so I'm not sure if that has something to do with it.

Thank you.

[bchehraz]

Ok, here's what I've figured out so far.

Typography.js seems to be interfering with the default layout.css (which is layout.sass in my case, just converted over) which comes with the default starter in Gatsby.JS in the default layout.js file. As soon as I take out the import statement, the code above (without theme) seems to work now as well as any theme I import.

Is there a reason why only the Funston theme works as intended, but any other theme or Typography.js use, the CSS file must be taken off?

[bchehraz]

It seems as this may be a problem with Gatsby, I will close this for the time being. I even started a blank Gatsby Default project to reproduce the problem, but this time no themes seem to work, not even funston which I claim to only work on this specific project discussed above.

Link to new issue on GatsbyJS