@font-face {
  font-family: "Rubik";
  font-weight: 300 800;
  font-display: swap;
  src: local("Rubik"), 
       url('./Rubik-VariableFont_wght.ttf') format('trueType supports variations'),
       url('./Rubik-VariableFont_wght.ttf') format('trueType-variations');
}

@font-face {
  font-family: 'Open Sans';
  font-weight: 400 800;
  font-stretch: 100% 200%;
  font-display: swap;
  src: local("Open Sans"), 
       url('./OpenSans-VariableFont_wdth,wght.ttf') format('trueType supports variations'),
       url('./OpenSans-VariableFont_wdth,wght.ttf') format('trueType-variations');
}

@font-face {
  font-display: swap;
  font-family: 'Open Sans ExtraBold';
  src: url(./OpenSans-ExtraBold.ttf) format("ttf");
  font-weight: bold;
  font-style: normal;
}