@font-face {
     font-family: 'Metropolis';
     src: local('Metropolis'),
         url('/webfont/Metropolis-Regular.woff2') format('woff2'),
         url('/webfont/Metropolis-Regular.woff') format('woff');
     font-weight: 400;
     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';
     src: local('Metropolis'),
         url('/webfont/Metropolis-Black.woff2') format('woff2'),
         url('/webfont/Metropolis-Black.woff') format('woff');
     font-weight: 900;
     font-style: normal;
     font-display: swap;
 }

@font-face {
     font-family: 'Metropolis';
     src: local('Metropolis'),
         url('/webfont/Metropolis-ExtraBold.woff2') format('woff2'),
         url('/webfont/Metropolis-ExtraBold.woff') format('woff');
     font-weight: 800;
     font-style: normal;
     font-display: swap;
 }
 
@font-face {
     font-family: 'Metropolis';
     src: local('Metropolis'),
         url('/webfont/Metropolis-Bold.woff2') format('woff2'),
         url('/webfont/Metropolis-Bold.woff') format('woff');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
 }
 
@font-face {
     font-family: 'Metropolis';
     src: local('Metropolis'),
         url('/webfont/Metropolis-SemiBold.woff2') format('woff2'),
         url('/webfont/Metropolis-SemiBold.woff') format('woff');
     font-weight: 600;
     font-style: normal;
     font-display: swap;
 }
 
@font-face {
     font-family: 'Metropolis';
     src: local('Metropolis'),
         url('/webfont/Metropolis-Medium.woff2') format('woff2'),
         url('/webfont/Metropolis-Medium.woff') format('woff');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
 }