Make sure to include one @font-face declaration for each style variant, such as weights and italics, under the same font-family. Otherwise, styles may not be correctly linked to their respective font files.
In your current setup, you are only overriding the first url, causing "Metropolis-Medium.woff2" not to load as it is replaced by "Metropolis-Bold.woff2".
You can use multiple URLs for fallback formats like woff2, woff, ttf, etc.
If no font-weight values are specified, the browser will match the family name "Metropolis" with "Metropolis-Bold.woff2" file or a regular font weight (e.g., 400).
For better compatibility, consider using more detailed rules, although some browsers may be more forgiving:
@font-face {
font-family: Metropolis;
font-weight: 400;
font-style: normal;
src: url("../../../public/fonts/metropolis/Metropolis-Regular.woff2")
format("woff2"),
url("../../../public/fonts/metropolis/Metropolis-Regular.woff")
format("woff");
}
@font-face {
font-family: Metropolis;
font-weight: 400;
font-style: italic;
src: url("../../../public/fonts/metropolis/Metropolis-Italic.woff2")
format("woff2"),
url("../../../public/fonts/metropolis/Metropolis-Italic.woff")
format("woff");
}
@font-face {
font-family: Metropolis;
font-weight: 500;
font-style: normal;
src: url("../../../public/fonts/metropolis/Metropolis-Medium.woff2")
format("woff2"),
url("../../../public/fonts/metropolis/Metropolis-Medium.woff")
format("woff");
}
@font-face {
font-family: Metropolis;
font-weight: 700;
font-style: normal;
src: url("../../../public/fonts/metropolis/Metropolis-Bold.woff2")
format("woff2"),
url("../../../public/fonts/metropolis/Metropolis-Bold.woff")
format("woff");
}
body {
font-family: Metropolis, sans-serif;
}
.medium {
font-weight: 500;
}
.bold {
font-weight: 700;
}