@font-face {
   font-display: swap; 
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
   src: local("Roboto");
   src: url('roboto-regular.woff2') format('woff2'),
        url('roboto-regular.woff') format('woff');
 }

 @font-face {
   font-display: swap; 
   font-family: 'Roboto';
   font-style: italic;
   font-weight: 400;
   src: local("Roboto");
   src: url('roboto-italic.woff2') format('woff2'),
        url('roboto-italic.woff') format('woff'); 
 }

 @font-face {
   font-display: swap; 
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 500;
   src: local("Roboto");
   src: url('roboto-500.woff2') format('woff2'),
        url('roboto-500.woff') format('woff'); 
 }

 @font-face {
   font-display: swap; 
   font-family: 'Roboto';
   font-style: italic;
   font-weight: 500;
   src: local("Roboto");
   src: url('roboto-500italic.woff2') format('woff2'),
        url('roboto-500italic.woff') format('woff');  
 }

 @font-face {
   font-display: swap; 
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 700;
   src: local("Roboto");
   src: url('roboto-700.woff2') format('woff2'),
        url('roboto-700.woff') format('woff');  
 }

 @font-face {
   font-display: swap; 
   font-family: 'Roboto';
   font-style: italic;
   font-weight: 700;
   src: local("Roboto");
   src: url('roboto-700italic.woff2') format('woff2'),
   url('roboto-700italic.woff') format('woff'); 
 }