2

I've been asked by a customer to match the font on mobiles to that on the desktop, I'm a bit out of touch with compatibility at the mo, but as far as i am aware if the browser cannot render the font then it chooses the next best thing.

Now, the customer is using '[expletus sans][1]' on the site, yet on mobiles it displays differently to the desktop version. This isn't apparent in dev tools you actually have to check on a mobile, so I cant check it with dev tools to see which font it is using. So:

  1. Is there a way to check which font is loading on mobiles accurately from a desktop/laptop
  2. Can anyone advise of a site where i can check browser compatibility with specific fonts
  3. Any idea how I can load this font on mobiles?

The site is can be found [here][2]

Thank you in advance D

Improve this question
2
  • 1
    If an answer provides a solution to your problem it's good etiquette, and good manners, to mark it as the correct answer.
    – Seth Warburton
    Jul 24, 2017 at 15:45
  • @SethWarburton I hadn't come back to this one - oops, thanks for the prompt :)
    – Dtorr1981
    Jul 25, 2017 at 0:21

1 Answer 1

Reset to default
2

The issue is the the site is not loading Expletus Sans, so it's never used. Your template css includes:

body {
    font-family: 'Expletus Sans', cursive;
}

But, there is no @font-face declaration that actually loads that font, so the fallback specified is used instead. In this case the only fallback specified is a system cursive font which desktop OSs typically have but mobile OSs typically do not.

The solution is to use @font-face declarations in your css to actually load the webfont files (which I assume you have). I'd recommend the new bulletproof font-face syntax.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.