Custom FONT issue

[Pbalazs89]

Hi there,

I’m trying to implement the Lithos Pro font on my staging site.
Thing is, it works on the desktop, but it does not work on some laptops and mobile devices.

Here’s my code for implementing:

@font-face {
font-family: ‘Lithos Pro’;
src: url(‘LithosPro-Regular.eot’);
src: url(‘LithosPro-Regular.eot?#iefix’) format(‘embedded-opentype’),
url(‘LithosPro-Regular.woff2’) format(‘woff2’),
url(‘LithosPro-Regular.woff’) format(‘woff’),
url(‘LithosPro-Regular.ttf’) format(‘truetype’),
url(‘LithosPro-Regular.svg#LithosPro-Regular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

So it should not be a compatibility issue due to formats.
Also, I’ve set up a test demo, where it also works, so the issue is only apparent in the case of X.

The demo is located here: http://padthai.decorolux.com/wp-content/fonts/demo.html

Now you can see on the desktop version that I am trying to use this font for headings mostly. I’ll attach a screenshot of the bug on mobile.

Thanks!

[paul.r]

Hi,

Please change your code to this.

@font-face {
font-family: 'Lithos Pro';
src: url('http://padthai.decorolux.com/wp-content/fonts/LithosPro-Regular.eot');
src: url('http://padthai.decorolux.com/wp-content/fonts/LithosPro-Regular.eot?#iefix') format('embedded-opentype'),
      url('http://padthai.decorolux.com/wp-content/fonts/LithosPro-Regular.woff2') format('woff2'),
      url('http://padthai.decorolux.com/wp-content/fonts/LithosPro-Regular.woff') format('woff'),
      url('http://padthai.decorolux.com/wp-content/fonts/LithosPro-Regular.ttf') format('truetype'),
      url('http://padthai.decorolux.com/wp-content/fonts/LithosPro-Regular.svg#LithosPro-Regular') format('svg');
          font-weight: normal;
          font-style: normal;
}

Hope that helps

[Pbalazs89]

Magnifique! Thanks!

[christian]

You’re welcome.