Why does the font not match in html?

Question

css

In general, I download fonts from Google, I connect fonts through gulp, everything is as it should be. The font was connected all right, and when I connect it in css , it doesn’t display on the site page like that ...

This is how it should be

...

@font-face {
  font-family: "Merriweather";
  font-display: swap;
  src: url("../fonts/Merriweather-Bold.woff") format("woff"), url("../fonts/Merriweather-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Merriweather";
  font-display: swap;
  src: url("../fonts/Merriweather-Regular.woff") format("woff"), url("../fonts/Merriweather-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

Answer 1

Refresh the cache in the browser Ctrl + F5

Answer 2

Why not try .ttf?

@font-face 
   {font-family: "Exo2";
   src: url("font/Exo2.ttf") format("truetype");
   font-style: normal;
   font-weight: normal;}

Always abbreviate names.