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

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

@font-face {
    font-family: 'Metropolis';
    font-style:  normal;
    font-weight: 700;
    font-display: swap;
    src: url("Metropolis-Bold.woff2") format("woff2"),
         url("Metropolis-Bold.woff") format("woff");
}
@font-face {
    font-family: 'Metropolis';
    font-style:  italic;
    font-weight: 700;
    font-display: swap;
    src: url("Metropolis-BoldItalic.woff2") format("woff2"),
         url("Metropolis-BoldItalic.woff") format("woff");
}