@font-face family looks different on desktop / mobile

HTML-CSS
1

I’m currently using a custom font on my website. The font looks fine on desktop, however on mobile it looks completely different. I’m also using all the right formats. Here is the code and pictures below:

Also When I remove the font family, it turns into a serif font which means a font is in fact loading, but why it looks completely different I’m not sure.

@font-face {

font-family: 'futura';

src: url('./futura.eot');

src: url('./futura.eot?') format('embedded-opentype'),

     url('./futura.woff2') format('woff2'),

     url('./futura.woff') format('woff'),

     url('./futura.ttf') format('truetype');

font-weight: normal;

font-style: normal;

}

gotemright.PNG
gotemright.PNG523×651 39.5 KB

gotemwrong
gotemwrong667×1280 59.7 KB

2

that link seems to be wrong, if you are using some online generator for font faces it looks like this:

./futura.eot?#iefix

Anyway I’m not sure if that’s the problem can you post a link with the full site to check?

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.