Custom Font CSS not showing up on mobile

I've used this code to inject custom css font for mobile and when I preview mobile on my web browser it looks good, but when I use an actual mobile device the font doesn't show up.

Here's the code:

 @media screen and (max-width: 640px) {
  h1, h2, h3, h4, h5, h6, p, span {
    font-family: 'Athletic', sans-serif !important;
  }
}

Have you uploaded and referenced this font in your CSS?

Are you just wanting this font on mobile, not on desktop?