@font-face {                                                                                                                             
    font-family: 'AtkinsonHyperlegibleMono';                
    src: url("/fonts/AtkinsonHyperlegibleMono-Regular.woff2") format('woff2'),
         url("/fonts/AtkinsonHyperlegibleMono-Regular.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'AtkinsonHyperlegibleNext';
    src: url("/fonts/AtkinsonHyperlegibleNext-Light.woff2") format('woff2'),
         url("/fonts/AtkinsonHyperlegibleNext-Light.ttf") format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'AtkinsonHyperlegibleNext';
    src: url("/fonts/AtkinsonHyperlegibleNext-Regular.woff2") format('woff2'),
         url("/fonts/AtkinsonHyperlegibleNext-Regular.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'AtkinsonHyperlegibleNext';
    src: url("/fonts/AtkinsonHyperlegibleNext-RegularItalic.woff2") format('woff2'),
         url("/fonts/AtkinsonHyperlegibleNext-RegularItalic.ttf") format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: 'AtkinsonHyperlegibleNext';
    src: url("/fonts/AtkinsonHyperlegibleNext-SemiBold.woff2") format('woff2'),
         url("/fonts/AtkinsonHyperlegibleNext-SemiBold.ttf") format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }