@font-face {
     font-family: 'Metropolis';
     src: local('Metropolis'),
         url('/webfont/Metropolis-Medium.otf') format('otf'),
     font-weight: normal;
     font-style: normal;
     font-display: swap;
}
 
/*
Include an additional @font-face block for each font file in the family.
Change the font-weight and font-style value to match each font file
*/
@font-face {
     font-family: 'Metropolis-Regular';
     src: local('Metropolis-Regular'),
         url('/webfont/Metropolis-Regular.otf') format('otf'),
     font-weight: normal;
     font-style: normal;
     font-display: swap;
}

@font-face {
     font-family: 'Metropolis-Bold';
     src: local('Metropolis-Bold'),
         url('/webfont/Metropolis-Bold.otf') format('otf'),
     font-weight: normal;
     font-style: normal;
     font-display: swap;
}