@font-face {
     font-family: 'Ridley Grotesk';
     src: local('Ridley Grotesk'),
         url('/webfont/ridleygrotesk-light-webfont.woff2') format('woff2'),
         url('/webfont/ridleygrotesk-light-webfont.woff') format('woff');
     font-weight: 300;
     font-style: normal;
     font-display: swap;
}

@font-face {
     font-family: 'Ridley Grotesk';
     src: local('Ridley Grotesk'),
         url('/webfont/ridleygrotesk-regular-webfont.woff2') format('woff2'),
         url('/webfont/ridleygrotesk-regular-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
}
 
 @font-face {
     font-family: 'Ridley Grotesk';
     src: local('Ridley Grotesk'),
         url('/webfont/ridleygrotesk-medium-webfont.woff2') format('woff2'),
         url('/webfont/ridleygrotesk-medium-webfont.woff') format('woff');
     font-weight: 500;
     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: 'Ridley Grotesk';
     src: local('Ridley Grotesk'),
         url('/webfont/ridleygrotesk-bold-webfont.woff2') format('woff2'),
         url('/webfont/ridleygrotesk-bold-webfont.woff') format('woff');
     font-weight: bold;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Ridley Grotesk';
     src: local('Ridley Grotesk'),
         url('/webfont/ridleygrotesk-italic-webfont.woff2') format('woff2'),
         url('/webfont/ridleygrotesk-italic-webfont.woff') format('woff');
     font-weight: normal;
     font-style: italic;
     font-display: swap;
}