How do I get the same looking font in mobile as in pc browser?

1
votes

I'm using font-family: "Proxima Nova Alt", "Helvetica Neue", Helvetica, Arial, sans-serif; but it looks terrible on mobile comparing to pc browser. How do I get the same looking result for mobile ?

enter image description here

1
cssmobilefonts
Are you referencing the font in the cloud, such as through Google Fonts API, or are you distributing the font with the site/app in a /fonts directory? – plushyObject
It may also be because you have a @media() query in your CSS that is causing it to reference a different font at smaller screen width. Just an idea. Not sure without seeing your code. – plushyObject
It appears that it's loading Helvetica/Arial on Mobile. – plushyObject
If that's all you did to make your fonts show up, then your CSS is just picking up that font from your computer. To make it show up for others. you'll need to include it, either with @fontface or through something like Google Fonts. – ingridly
Didn't know that, sounds logical. Thanks ! – mhlavacka

1 Answers

2
votes

@ingridly is right. I would guess those fonts are appearing on your desktop because they're installed on your desktop's OS. You have two ways to do this:

1) You need to find them in Google Fonts, TypeKit, or other third-party cloud-based font solution. They provide ways to reference them through CSS, HTML, and JS.

2) Distribute the fonts and actually put the font file in a /font directory (can be called whatever...but /font works), and then reference the file using @font-face

They're defaulting to Helvetica or Arial on mobile because they're not installed on that device.

Hope this helps!