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

user_11848391 0
Viewed 1836

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

storybook styled-components reactjs css
2 Answers

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.

user_124027320

Instead of adding it in createGlobalStyle, add it in your root index.html head tag.

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    // added here <------
    <style>@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');</style>

    <title>React App</title>
</head>

and then declare the font-family in createGlobalStyle

import { createGlobalStyle } from 'styled-components'

export const GlobalStyle = createGlobalStyle`
    body{
        font-family:'Roboto', sans-serif;
        margin: 0;
        padding: 0;
    }
`
user_153752710
Related