Importing fonts from Google fonts and adding it to CreateGlobalStyle not working properly

2
votes

I'm importing Roboto from Google fonts with 4 different weights, however I don't know if I've done it properly because I'm missing font-weights.

When trying to use :

font-weight: 400;

or

font-weight: 500;

There is no visible difference.

This is how I'm importing my font:

import { createGlobalStyle } from 'styled-components'

export const GlobalStyle = createGlobalStyle`
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

    body{
        font-family:'Roboto', sans-serif;
        margin: 0;
        padding: 0;
    }
`

implementation of Styled-component:

const ProductTitle = Styled.div`
    font-weight: 500;
    color: #737B81;
    line-height: 20px;
`

I'm making use of Styled-components' createGlobalStyle to pull this into my different React components

1
cssreactjsstyled-componentsstorybook

1 Answers

1
votes

Try this way:

import { createGlobalStyle } from "styled-components";
const GlobalStyles = createGlobalStyle`
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
  body {
    font-family: 'Roboto', sans-serif;
  }
`

So the different is first import then use that, if don't work import just font then change with css the weight.