CODEWITHSUNDEEP
cssreactjsstyled-componentsgoogle-fonts
Ryan
Ryan

Reputation: 1242

Unable to match font weights with google fonts and react styled components

I'm trying the following style below. The issue is the actual result font-weight is no where close to the mock-up. How can I ensure I get the right style?

https://fonts.google.com/specimenTab?standard-styles#standard-styles

const LogoH1 = styled.span`
    text-transform: uppercase;
    font-family: 'Montserrat';
    font-size: 50px;
    font-weight: 900;
    letter-spacing: -5px;
`

Design Tool (Adobe XD)

enter image description here

Result

enter image description here

I'm using Gatsby to connect the fonts:

  plugins: [
    {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [
          `Montserrat`,
        ],
      }
    }
  ],

Upvotes: 0

Views: 192

Answers (1)

italant
italant

Reputation: 305

plugins: [
{
  resolve: `gatsby-plugin-google-fonts`,
  options: {
    fonts: [
      `Montserrat\:400,500,600,700,800,900`,
    ],
  }
}],

Upvotes: 1

Related Questions