'Font not changing in output

I am trying to program my Portfolio website as a beginner and trying to put in some font I found from the internet. I preloaded the font, tried different fonts, changed the code from ttf to both woff and woff2, font works in the demo HTML file that comes with formating it. Both Chrome and Mozzila says that the font-family is Neutral Face. It just won't change. Honestly, I feel like I have tried everything but ask here. Thanks for any help.

EDIT: added the part where I test the font the most. At first I tried to use the body font family but upon seeing the font not changing I tried to directly add it to the nav h1.

CSS
@font-face {
  font-family: 'Neutral Face';
  src: url("/assets/css/fonts/NeutralFaceRegular.woff2") format('woff2'),
      url("/assets/css/fonts/NeutralFaceRegular.woff") format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neutral Face';
  src: url("/assets/css/fonts/NeutralFaceBold.woff2") format('woff2'),
      url("/assets/css/fonts/NeutralFaceBold.woff") format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}



/* Variables */
:root {
  --font-family: 'Neutral Face', sans-serf;
  --normal-font: 400;
  --bold-font: 700;
  --bolder-font: 900;
  --bg-color: #fcfcfc;
  --primary-color: #99ff00;
  --secondary-color: #CD3290;
  --primary-shadow: #8b8eaf;
  --secondary-shadow: #7c7c7c;
  --bottom-margin: 0.5rem;
  --bottom-margin-2: 1rem;
  --line-height: 1.7rem;
  --transition: 0.3s;
}

body {
  font-family: var(--font-family);
}

nav {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 3.5rem;
  background-color: white;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}

nav h1 {
  color: var(--primary-color);
  font-family: 'Neutral Face', 'sans-serif';
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 5px;
  letter-spacing: .05em
}
HTML
<body>
    <!-- Navbar -->
    <nav>
        <h1>Martin Ploig</h1>
</nav>
</body>
htmlcssfonts


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions