@font-face {
  font-family: Metropolis;
  src: local(Metropolis-Light),
    url(Metropolis-Light.woff2) format("woff2"),
    url(Metropolis-Light.woff) format("woff");
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}

@font-face {
  font-family: Metropolis;
  src: local(Metropolis-Regular),
    url(Metropolis-Regular.woff2) format("woff2"),
    url(Metropolis-Regular.woff) format("woff");
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}

@font-face {
  font-family: Metropolis;
  src: local(Metropolis-Medium),
    url(Metropolis-Medium.woff2) format("woff2"),
    url(Metropolis-Medium.woff) format("woff");
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}

@font-face {
  font-family: Metropolis;
  src: local(Metropolis-SemiBold),
    url(Metropolis-SemiBold.woff2) format("woff2"),
    url(Metropolis-SemiBold.woff) format("woff");
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}

@font-face {
  font-family: Metropolis;
  src: local(Metropolis-Bold),
    url(Metropolis-Bold.woff2) format("woff2"),
    url(Metropolis-Bold.woff) format("woff");
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}