@font-face {
   font-family: 'Rubik';
   font-style: normal;
   font-display: swap;
   font-weight: 300;
   src: url('300.ttf') format('truetype');
}
@font-face {
   font-family: 'Rubik';
   font-style: normal;
   font-display: swap;
   font-weight: 500;
   src: url('500.ttf') format('truetype');
}
@font-face {
   font-family: 'Rubik';
   font-style: normal;
   font-display: swap;
   font-weight: 700;
   src: url('700.ttf') format('truetype');
}
@font-face {
   font-family: 'Rubik';
   font-style: normal;
   font-display: swap;
   font-weight: 900;
   src: url('900.ttf') format('truetype');
}
@font-face {
   font-family: 'Rubik';
   font-style: italic;
   font-display: swap;
   font-weight: 300;
   src: url('300italic.ttf') format('truetype');
}
@font-face {
   font-family: 'Rubik';
   font-style: regular;
   font-display: swap;
   font-weight: 400;
   src: url('regular.ttf') format('truetype');
}
@font-face {
   font-family: 'Rubik';
   font-style: italic;
   font-display: swap;
   font-weight: 400;
   src: url('italic.ttf') format('truetype');
}
@font-face {
   font-family: 'Rubik';
   font-style: italic;
   font-display: swap;
   font-weight: 500;
   src: url('500italic.ttf') format('truetype');
}
@font-face {
   font-family: 'Rubik';
   font-style: italic;
   font-display: swap;
   font-weight: 700;
   src: url('700italic.ttf') format('truetype');
}
@font-face {
   font-family: 'Rubik';
   font-style: italic;
   font-display: swap;
   font-weight: 900;
   src: url('900italic.ttf') format('truetype');
}