I can't change font weight or font size

Viewed 50

I'm a beginner web developer so this will probably be a rookie question. I wanted to use different fonts for the site I'm currently designing. But, no matter what value I give to the font-weight or font-size property, nothing changes. Yes, I embedded the fonts in the section. I'll include the code. Thanks in advance.

body {
  margin: 0;
  text-align: center;
  font-family: "Merriweather", serif;
  font-weight: 700
}

h1 {
  margin-top: 0;
  font-family: "Sacramento", cursive;
  font-weight: bold;
}

h2 {
  font-family: "Montserrat", sans-serif;
}

h3 {
  font-family: "Montserrat", sans-serif;
}
<head>
  <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=Merriweather:wght@400;700&family=Montserrat&family=Sacramento&display=swap" rel="stylesheet" />
</head>

<body>
  test text
  <h1>h1 test</h1>
  <h2>h2 test</h2>
  <h3>h3 test</h3>
</body>

2 Answers

Not all fonts supports all font-weight values
For example, Sacramento font that you use for h1 tag,
as I see on google fonts page,
only supports Regular 400 font-weight

font-size should work as usual for all fonts,
try font-size: 100px; for example

maybe you can use font-size as an alternative if font-weight doesn't work. I usually do something like this

Related