Implementing in Gatsby

[claytonbwell]

I'm very green to Gatsby (and Javascript coding in general) so I'm hoping someone can explain this to me so that I can move past it. I can't figure out how to use typography.js in my site. I've got it all installed correctly. The issue I have is actually implementing it in my project.

I'm following a Gatsby tutorial and building a banner that will have text overlaid. I don't like the font the instructor used so thought I'd try typography.js... If anyone can help me out I would greatly appreciate it.

Here's what I got:

in typography.js file in my utils folder:

import Typography from 'typography'

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

export default typography

my Banner.js file looks like this:

import React from 'react'
import styled from 'styled-components'
import { styles } from '../utils'
import typography from '../utils'

export default function Banner({ title, subtitle, children }) {
  return (
    <BannerWrapper>
      <h1 className='title'>{title}</h1>
      <h3 className='subtitle'>{subtitle}</h3>
      {children}
    </BannerWrapper>
  )
}

const BannerWrapper = styled.div`
  margin-bottom: 3rem;
  text-align: center;
  .title {
    color: #fff;
    font-size: 2rem;
    font-weight: 500;
    text-transform: uppercase;
    ${styles.letterSpacing({ spacing: '0.2rem' })}
  }
  .subtitle {
    color: #fff;
    ${styles.textSlanted};
    ${styles.letterSpacing({ spacing: '0.1rem' })};
    font-size: 1.2rem;
  }
`

I'm sure I'm calling it into the project incorrectly to begin with, but I also need to know if/how to apply it to my h1 and h3 tags. (The styles.js file in the utils folder contains navbar animation, one bad font, border styling and letter spacing.)

[ghost]

Are you including the plugin in yourgatsby-config.js?

You shouldn't need to import the typography.js you created to use it. You can but the gatsby plugin makes it painless.

[claytonbwell]

Yea I've got it in my gatsby-config.js file. Is typography.js supposed to auto-apply to all h and p tags?

plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`
      }
    },