I can't change font weight or font size-CodePudding

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.

HTML code:

<!DOCTYPE html>
<html lang="en">    
 <head>    
 <meta charset="UTF-8" />      
 <link rel="stylesheet" href="css/styles.css" />      
 <link rel="icon" href="favicon.ico" />      
 <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>

CSS code:

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

CodePudding user response：

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

CodePudding user response：

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