Gatsby: typography.js doesn't work as intended on Gatsby Default Starter

[bchehraz]

Description

On a brand new Gatsby Default Starter project, when following the GatsbyJS documentation on Typography.js (here), no theme or API usage from typography.js seems to work unless I remove the layout.css import statement inside of layout.js. I have a feeling that this isn't the intended usage, since no where in the documentation does it say to remove the css. Surprisingly enough, on a different unrelated GatsbyJS project, I get the same results except for 1 theme which is Funston which for whatever reason works seemingly to the full extent without having to remove the css. Although in this new gatsby starter project, not even Funston works. I'm not sure if this is a caching issue or not. To view my changes, I am accessing the website locally through Chrome.

I'll try to be as thorough as possible. Thanks for any help!

Steps to reproduce

Step 1: I create a new GatsbyJS site using the default gatsby starter and navigate into the project directory.

gatsby new gatsby-site

cd gatsby-site

Step 2: I run gatsby develop to see current font that comes with Gatsby. Once I add typography.js, I expect to see font changes on my screen.

gatsby develop

Step 3: I stop running the instance and I add the typography.js dependencies, along with the gatsby plugin (instructions based on GatsbyJS Docs (here).
npm install gatsby-plugin-typography react-typography typography --save

Step 4: According to the docs, I add in this code into gatsby-config.js under plugins.

...
plugins: [
    {
      resolve: 'gatsby-plugin-typography',
      options: {
        pathToConfigModule: 'src/utils/typography',
      },
    },
...

Step 5: I create the file typography.js under /src/utils. In this case, I am not using a theme to show that even without a theme the code does not work.

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;

Step 5 (ALTERNATIVE): Adding in a typography.js theme and subsequently adding the npm package associated with it, as an alternative to using the above step 5 code.

import Typography from 'typography';
import grandViewTheme from 'typography-theme-grand-view'

const typography = new Typography(grandViewTheme);

export default typography;

and installing the dependency...

npm install --save typography-theme-grand-view

Step 6: I run the site again to see if there are any changes, but there are no font changes except for the links at the footer.

gatsby develop

Step 6: If I _remove the layout.css import_ in layout.js, then ALL font changes seem to be made. (see import statements).

import React from "react"
import PropTypes from "prop-types"
import { StaticQuery, graphql } from "gatsby"

import Header from "./header"
import "./layout.css" //if I remove this line, the changes are made

const Layout = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <>
        <Header siteTitle={data.site.siteMetadata.title} />
        <div
          style={{
            margin: `0 auto`,
            maxWidth: 960,
            padding: `0px 1.0875rem 1.45rem`,
            paddingTop: 0,
          }}
        >
          <main>{children}</main>
          <footer>
            © {new Date().getFullYear()}, Built with
            {` `}
            <a href="https://www.gatsbyjs.org">Gatsby</a>
          </footer>
        </div>
      </>
    )}
  />
)

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

This is all code that comes default with GatsbyJS in the default starter code.

Expected result

After following the GatsbyJS docs (or typography.js docs, for that matter) when importing a new theme or using the typography.js API, I expect to see font changes on the screen, without having to remove the layout.css that comes default imported into layout.js.

Actual result

Every usage of typography.js fails to work as intended unless I get rid of the layout.css import statement inside of layout.js.

Environment

System:
OS: macOS 10.14.3
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 5.6.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
Browsers:
Chrome: 73.0.3683.86
Safari: 12.0.3
npmPackages:
gatsby: ^2.3.3 => 2.3.3
gatsby-image: ^2.0.35 => 2.0.35
gatsby-plugin-manifest: ^2.0.25 => 2.0.25
gatsby-plugin-offline: ^2.0.25 => 2.0.25
gatsby-plugin-react-helmet: ^3.0.11 => 3.0.11
gatsby-plugin-sharp: ^2.0.32 => 2.0.32
gatsby-plugin-typography: ^2.2.10 => 2.2.10
gatsby-source-filesystem: ^2.0.28 => 2.0.28
gatsby-transformer-sharp: ^2.1.17 => 2.1.17
npmGlobalPackages:
gatsby-cli: 2.4.7

[KyleAMathews]

Does the typography.js CSS get added to the ?

[bchehraz]

I'm not sure if you finished your comment there. The only styling changes that seem to take place upon adding in a theme is the links ('a' tag) styles, depending on whether that theme changes link styling. Specifically, it seems to be changing the color of the links (in the case of typography-theme-grand-view, it changes the color to some kind of orange and onHover turns black). Other than that, I am seeing no _real_ changes unless I remove the layout.css import statement in layout.js.

Edit: If I attempt to output CSS from the typography.js object, it does output the css...

This is from inside typography.js inside /src/utils, right before the export statement.

console.log(typography.toString())
export default typography

[KyleAMathews]

My point I guess is this is expected — Typography.js is adding all its CSS — it's just getting overridden. There's an argument here that we shouldn't have a default css file like this as it does make the default starter harder to modify. /cc @gatsbyjs/core @gatsbyjs/ecosystem

[eclectic-coding]

@KyleAMathews I think the question might be "What features do you want to represent in the default starter?" At some point, the tutorials and docs, will take over showing features, but again, the question is what do you want to default starter to serve as. For instance, in the seo.js file of the default starter useStaticQuery has been used to show its usage, while maintaining StaticQuery in other places. So, do we want to follow the same logic with typography.js and layout.css?

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[DubaniWarrior]

Anybody got the fix for it?

[aleffsouza]

I believe adding a footnote on that guide to remove all the font-family on src/components/layout.css would be good enough :)