@font-face {
    font-family: "Metropolis";
    src: local("Metropolis"), url("/fonts/Metropolis-Thin.woff2") format("woff2");
    font-weight: 100;
}

@font-face {
    font-family: "Metropolis";
    src: local("Metropolis"), url("/fonts/Metropolis-ExtraLight.woff2") format("woff2");
    font-weight: 200;
}

@font-face {
    font-family: "Metropolis";
    src: local("Metropolis"), url("/fonts/Metropolis-Light.woff2") format("woff2");
    font-weight: 300;
}

@font-face {
    font-family: "Metropolis";
    src: local("Metropolis"), url("/fonts/Metropolis-Regular.woff2") format("woff2");
    font-weight: 400;
}

@font-face {
    font-family: "Metropolis";
    src: local("Metropolis"), url("/fonts/Metropolis-Medium.woff2") format("woff2");
    font-weight: 500;
}

@font-face {
    font-family: "Metropolis";
    src: local("Metropolis"), url("/fonts/Metropolis-SemiBold.woff2") format("woff2");
    font-weight: 600;
}

@font-face {
    font-family: "Metropolis";
    src: local("Metropolis"), url("/fonts/Metropolis-Bold.woff2") format("woff2");
    font-weight: 700;
}

@font-face {
    font-family: "Metropolis";
    src: local("Metropolis"), url("/fonts/Metropolis-ExtraBold.woff2") format("woff2");
    font-weight: 800;
}

@font-face {
    font-family: "Metropolis";
    src: local("Metropolis"), url("/fonts/Metropolis-Black.woff2") format("woff2");
    font-weight: 900;
}