@font-face family looks different on desktop / mobile

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;


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


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

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