Self-hosted font only appears correctly on Safari

[john]

Hi guys,

My site is now live! Pls visit: http://www.johnalderson.me

On desktop and Safari browser, the custom font ‘Executive-Regular’ appears as it should.

However on Firefox and Chrome it looks pretty awful: bolder and tightly spaced.

I’ve tried adding:
font-weight: normal;

This has made no difference.

Is there something in the theme and styling for the Slider tab list (on right on my homepage) that might be affecting the appearance of the font on those other browsers?

See images here: http://ge.tt/3nHNJfo2

[SeaTheme]

Hi,

What’s font files you linked in css? The different file format is for different borwser, please refer:

TrueType Font (TTF) – Compatible with Internet Explorer version 9.0 and above, Chrome starting at 4.0, Firefox at 3.5, Safari since 3.1 and Opera beginning with 10.0
OpenType Font (OTF) – Has the same browser compatibility as the TrueType Font
Web Open Font Format (WOFF) – Supported by Internet Explorer version 9.0 and above, Chrome starting at 5.0, Firefox at 3.6, Safari since 5.1 and Opera beginning with 11.1
Web Open Font Format 2.0 (WOFF2) – Supported only by Chrome since version 36.0, Firefox starting at 35.0 and Opera with 26.0
Embedded OpenType Font (EOT) – Exclusively available for Internet Explorer version 6.0 and above.

More: https://premium.wpmudev.org/blog/custom-fonts-css/

Regards!
Bwsm – uiueux.com – Twitter – Facebook

[john]

The custom font I licensed was provided in these formats: WOFF, EOT.

Which other formats do I absolutely need?

[SeaTheme]

Should link them both separated by ,

like https://seatheme.net/forums/topic/how-to-install-custom-fonts-in-wordpress/#post-12929

[john]

Thanks, I’ve done that already I think.

[Author]

Posts