@font-face {
  font-family: JoyPixels;
  font-display: swap;
  src:
    url(fonts/JoyPixels-SBIX.woff) format('woff'),
    url(fonts/JoyPixels-SBIX.woff2) format('woff2');
}

@font-face {
  font-family: JoyPixelsSVG;
  font-display: swap;
  src:
    url(fonts/JoyPixels-SVG.woff) format('woff'),
    url(fonts/JoyPixels-SVG.woff2) format('woff2');
}

@font-face {
  font-family: JoyPixels;
  font-display: swap;
  src: url(fonts/Roboto-Light.ttf) format('truetype');
  font-weight: 300;
  unicode-range: 'U+000-5FF';
}

@font-face {
  font-family: JoyPixels;
  font-display: swap;
  src: url(fonts/Roboto-Regular.ttf) format('truetype');
  font-weight: 400;
  unicode-range: 'U+000-5FF';
}

@font-face {
  font-family: JoyPixels;
  font-display: swap;
  src: url(fonts/Roboto-Medium.ttf) format('truetype');
  font-weight: 500;
  unicode-range: 'U+000-5FF';
}

@font-face {
  font-family: JoyPixelsSVG;
  font-display: swap;
  src: url(fonts/Roboto-Light.ttf) format('truetype');
  font-weight: 300;
  unicode-range: 'U+000-5FF';
}

@font-face {
  font-family: JoyPixelsSVG;
  font-display: swap;
  src: url(fonts/Roboto-Regular.ttf) format('truetype');
  font-weight: 400;
  unicode-range: 'U+000-5FF';
}

@font-face {
  font-family: JoyPixelsSVG;
  font-display: swap;
  src: url(fonts/Roboto-Medium.ttf) format('truetype');
  font-weight: 500;
  unicode-range: 'U+000-5FF';
}