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

@font-face {
  font-family: JoyPixels;
  font-display: swap;
  src: url(fonts/Roboto-Regular.ttf) format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: JoyPixels;
  font-display: swap;
  src: url(fonts/Roboto-Medium.ttf) format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: JoyPixelsSVG;
  font-display: swap;
  src: url(fonts/Roboto-Light.ttf) format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: JoyPixelsSVG;
  font-display: swap;
  src: url(fonts/Roboto-Regular.ttf) format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: JoyPixelsSVG;
  font-display: swap;
  src: url(fonts/Roboto-Medium.ttf) format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: JoyPixels;
  font-display: swap;
  src: url(fonts/Roboto-Bold.ttf) format('truetype');
  font-weight: 700;
}

@font-face {
  font-family: JoyPixelsSVG;
  font-display: swap;
  src: url(fonts/Roboto-Bold.ttf) format('truetype');
  font-weight: 700;
}