React - can't change Google Fonts font-weight property
How can I change Google Fonts font-weight property?
I've imported the following font into my index.html file:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mitr:wght@200&display=swap" rel="stylesheet">
and now, when I try to change font-weight of my title element in .css file like this:
.title {
font-weight: 500;
}
it doesn't change anything.
So my question is how can I change the font-weight of the Google Font to make the .title element bold?
Firstly, you need to import all the font-weight property values you want to use in your project.
You've only imported the font-weight: 200 (as you can see wght@200 in the 3rd link element).
Solution
1. Go to the Google Fonts once again and select all the font-weight property values you want to use in your project:
2. Import them - you can use the <link> elements as you did it in your project:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mitr:wght@200;300;400&display=swap" rel="stylesheet">
Note:
In the example above, you can see 3 different font-weights (
wght@200;300;400). Now you can usefont-weight:200,300or400in your project.