#font-face family looks different on desktop / mobile - html

Question

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'),
url('./futura.svg') format('svg');
font-weight: normal;
font-style: normal;
}

Answer 1

Solution: I just had to change the font-weight from normal to bold.

Answer 2

i had same problem, i remove font type and just keep ttf,i use media query for limit this change for mobile
#font-face {
font-family: 'futura';
src: url('./futura.ttf');
}
#media(min-width:768px){
#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'),
url('./futura.svg') format('svg');
font-weight: normal;
font-style: normal;
}
}
if this wont work. add this line on top of your css
#font-face {
font-family: 'futura';
src: url('./futura.ttf');
}