@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');
}