CSS font-weight property only displaying regular weight
Question
I imported Montserrat(400,700, and 900) and Ubuntu(400) fonts from google fonts but it seems like only Montserrat 400 and Ubuntu 400 are working, I can't use Montserrat 700 nor Montserrat 900. I would appreciate it if anyone can help me as I'm stuck on this for some time now. Thank you:! Here is my code:
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Ubuntu&display=swap" rel="stylesheet"> body{ font-family: 'Montserrat', sans-serif; } h1{ font-size: 3.5rem; font-family: 'Montserrat', sans-serif; font-weight: 900; line-height: 1.5; } h3{ font-size: 1.5rem; font-family: 'Montserrat', sans-serif; font-weight: 700; }
<h1>Title</h1> <h3>Title</h3>
3 answers
solution1
1 2020-06-21 11:54:44
Can it be, that you link the font in your css file? You should move it to your html.
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Ubuntu&display=swap" rel="stylesheet">
<p class="w-900">Hello 900</p>
<p class="w-700">Hello 700</p>
body{
font-family: 'Montserrat', sans-serif;
}
.w-900{
font-weight: 900;
}
.w-700{
font-weight: 700;
}
Alternativelly, you can use @font-face
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
solution2
1 2020-06-21 11:56:44
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Ubuntu&display=swap" rel="stylesheet">
This part of your code should be in your HTML file. Here's what I did and how it looks like.
HTML:
<html>
<link href="https://fonts.googleapis.com/css2?
family=Montserrat:wght@400;700;900&family=Ubuntu&display=swap" rel="stylesheet">
<head>
<link rel="stylesheet" href="style.css">
<h1>This is 900.</h1>
<h3>This is 700.</h3>
</head>
</html>
CSS:
h1{
font-size: 3.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
line-height: 1.5;
}
h3{
font-size: 1.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
solution3
0 2020-06-21 12:16:42
I'm gathering that this is a Chrome bug, which is interesting because I am using a version of Chromium and it works fine. I would recommend using internal CSS (rather than external stylesheets) underneath a <style> tag in your <head> section (where you should also reference the <link> to the font), and adding the CSS assigned to * , as shown below, to it:
* { -webkit-font-smoothing: antialiased; } body { font-family: 'Montserrat', sans-serif; } h1 { font-size: 3.5rem; font-family: 'Montserrat', sans-serif; font-weight: 900; line-height: 1.5; } h3 { font-size: 1.5rem; font-family: 'Montserrat', sans-serif; font-weight: 700; }
<head> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Ubuntu&display=swap" rel="stylesheet"> </head> <body> <h1>Title</h1> <h3>Title</h3> </body>
Alternatively, there is also the @import method, which you should find greyed out as the right-hand option in the Embed section of the Google Fonts link . This should be your secondary option, however, because, as @igriorik notes here , these rules defer the loading of the included resource until the file is fetched, which could lead to broken fonts on some platforms.
To do this, though, you would add the @import rules underneath a <style> tag, and reference it in the desired element. In your case (with the Montserrat font):
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap'); body { font-family: 'Montserrat', sans-serif; } h1 { font-size: 3.5rem; font-family: 'Montserrat', sans-serif; font-weight: 900; line-height: 1.5; } h3 { font-size: 1.5rem; font-family: 'Montserrat', sans-serif; font-weight: 700; }
<h1>Title</h1> <h3>Title</h3>
Let me know if this doesn't work!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.