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>

It seems to work fine for me: https://jsfiddle.net/f3qx8nkb/ What browser are you using? — ttoshiro, Jun 21 '20 at 11:49
Same here: https://jsfiddle.net/wfp168se/4/ (removed all non-weight properties to see the pure effect) — Maria K., Jun 21 '20 at 11:52
@ttoshiro I am using Chrome but Montserrat 700 and 900 won't work :/. I am also using Bootstrap but I'm making the html declarations of bootstrap before the declaration of google fonts in case it doesn't overwrite anything but still not working :( — Ege Akkaya, Jun 21 '20 at 11:59

score 1 · Answer 1 · answered Jun 21 '20 at 11:54

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;
}

JSFiddle

Alternativelly, you can use @font-face

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

W3 Schools

How to import fonts

score 1 · Answer 2 · answered Jun 21 '20 at 11:56

1

<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;
}

In Chrome it looks like this.

answered Jun 21 '20 at 11:56

Mina

315
1
5
16

That part is already in my HTML file and I have the same code as you but my Chrome is displaying it differently for Montserrat 700 and 900 – Ege Akkaya Jun 21 '20 at 11:58
You probably made a mistake somewhere, I suggest rewriting some parts entirely and also trying font-face if it doesn't work for some reason. Also, test it in other browsers or maybe even on an another computer if you have access to it. – Mina Jun 21 '20 at 12:07

ttoshiro · Answer 3 · 2020-06-21T12:49:40.690

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!

CSS font-weight property only displaying regular weight

3 Answers3