@font-face {
  font-family: 'Roboto Italic';
  font-style: italic;
  font-display: swap;
  src: url(../fonts/Roboto-Italic-VariableFont.ttf) format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-style: noraml;
  font-display: swap;
  src: url(../fonts/Roboto-VariableFont.ttf) format('truetype');
}

@font-face {
  font-family: 'Roboto Serif Italic';
  font-style: italic;
  font-display: swap;
  src: url(../fonts/RobotoSerif-Italic-VariableFont.ttf) format('truetype');
}

@font-face {
  font-family: 'Roboto Serif';
  font-style: noraml;
  font-display: swap;
  src: url(../fonts/RobotoSerif-VariableFont.ttf) format('truetype');
}

@font-face {
  font-family: 'Noto Sans Italic';
  font-style: italic;
  font-display: swap;
  src: url(../fonts/NotoSans-Italic-VariableFont.ttf) format('truetype');
}

@font-face {
  font-family: 'Noto Sans';
  font-style: noraml;
  font-display: swap;
  src: url(../fonts/NotoSans-VariableFont.ttf) format('truetype');
}

@font-face {
  font-family: 'Noto Serif Italic';
  font-style: italic;
  font-display: swap;
  src: url(../fonts/NotoSerif-Italic-VariableFont.ttf) format('truetype');
}

@font-face {
  font-family: 'Noto Serif';
  font-style: noraml;
  font-display: swap;
  src: url(../fonts/NotoSerif-VariableFont.ttf) format('truetype');
}

@font-face {
  font-family: 'Varela';
  font-style: noraml;
  font-display: swap;
  src: url(../fonts/Varela-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Varela Round';
  font-style: italic;
  font-display: swap;
  src: url(../fonts/VarelaRound-Regular.ttf) format('truetype');
}