@font-face {
    font-family: "Metropolis";
    src: url("../fonts/metropolis/Metropolis-ExtraBold.woff2") format("woff2"),
    url("../fonts/metropolis/Metropolis-ExtraBold.woff") format("woff"),
    url("../fonts/metropolis/Metropolis-ExtraBold.ttf") format("ttf");
    font-style: normal;
    font-display: swap;
    font-weight: 800;
}

@font-face {
    font-family: "Metropolis";
    src: url("../fonts/metropolis/Metropolis-Bold.woff2") format("woff2"),
    url("../fonts/metropolis/Metropolis-Bold.woff") format("woff"),
    url("../fonts/metropolis/Metropolis-Bold.ttf") format("ttf");

    font-style: normal;
    font-display: swap;
    font-weight: 700;
}

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

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

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

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

@font-face {
    font-family: "Metropolis";
    src: url("../fonts/metropolis/Metropolis-Thin.woff2") format("woff2"),
    url("../fonts/metropolis/Metropolis-Thin.woff") format("woff"),
    url("../fonts/metropolis/Metropolis-Thin.ttf") format("ttf");
    font-style: normal;
    font-display: swap;
    font-weight: 200;
}

.font-metropolis {
    font-family: 'Metropolis', sans-serif
}

@font-face {
    font-family: "MetropolisBold";
    src: url(../fonts/metropolis/Metropolis-Bold.woff2) format("woff2"),
    url(../fonts/metropolis/Metropolis-Bold.woff) format("woff"),
    url(../fonts/metropolis/Metropolis-Bold.ttf) format("ttf");
}

@font-face {
    font-family: "MetropolisMedium";
    src: url(../fonts/metropolis/Metropolis-Medium.woff2) format("woff2"),
    url(../fonts/metropolis/Metropolis-Medium.woff) format("woff"),
    url(../fonts/metropolis/Metropolis-Medium.ttf) format("ttf");
}

@font-face {
    font-family: "MetropolisRegular";
    src: url(../fonts/metropolis/Metropolis-Regular.woff2) format("woff2"),
    url(../fonts/metropolis/Metropolis-Regular.woff) format("woff"),
    url(../fonts/metropolis/Metropolis-Regular.ttf) format("ttf");
}