Menu
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
288
asked Oct 26 '25 06:10
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.
100
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;
}
`
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With