Mobile layout font issue with PRO

Support
#1

Hi there,

I’m making a blog here:

http://padthai.decorolux.com/

On desktop, it looks fine, I can use my custom fonts ‘lithos pro’ and ‘lobster two’.
However, when viewing the site from an iphone, it falls back to different fonts. Any idea why this might happen?

Thanks!

#2

Hello There,

Thanks for writing in! In your custom css, you added this:

@font-face {
  font-family: 'Lithos Pro Black';
  src: url('http://padthai.decorolux.com/wp-content/fonts/LithosPro-Black.otf');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Lithos Pro Regular';
  src: url('http://padthai.decorolux.com/wp-content/fonts/LithosPro-Regular.otf');
  font-weight: 300;
  font-style: italic;
}

@font-face {font-family: 'Lobster Two Italic';
  src: url('http://padthai.decorolux.com/wp-content/fonts/LobsterTwo-Italic.otf');
  font-weight: 300;
  font-style: italic;
}

.otf file may not be supported in mobile devices. Please make use that you include .ttf, .woff, .woof2, .svg and .eot for browser compatibility. For more information about how you can make use of @font-face and other font file formats, please check this out:


Hope this helps. Please let us know how it goes.

#3

Hi,

I added the following CSS:

@font-face {
font-family: ‘Lithos Pro Black’;
src: url(‘http://padthai.decorolux.com/wp-content/fonts/LithosPro-Black.otf’) format(“otf”),
url(‘http://padthai.decorolux.com/wp-content/fonts/LithosPro-Black.eot’) format(“eot”),
url(‘http://padthai.decorolux.com/wp-content/fonts/LithosPro-Black.woff’) format(“woff”),
url(‘http://padthai.decorolux.com/wp-content/fonts/LithosPro-Black.svg’) format(“svg”);
font-weight: 700;
font-style: italic;
}

This is the font that is used in the header. It worked fine on desktop, and still does. However, it still doesn’t work on mobile.

Did I mess something up, or is there something else happening?

Thanks!

#4

Hi,

You need to add ttf

url('http://padthai.decorolux.com/wp-content/fonts/LithosPro-Black.ttf') format('truetype'), /* Safari, Android, iOS */

You can try this site to get .ttf

For more information you may refer to the link below

Hope that helps.

#5

Hi Paul,

Thanks, I updated the code to

@font-face {
font-family: ‘Lithos Pro Black’;
src: url(‘http://padthai.decorolux.com/wp-content/fonts/LithosPro-Black.otf’) format(“otf”),
url(‘http://padthai.decorolux.com/wp-content/fonts/LithosPro-Black.eot’) format(“eot”),
url(‘http://padthai.decorolux.com/wp-content/fonts/LithosPro-Black.woff’) format(“woff”),
url(‘http://padthai.decorolux.com/wp-content/fonts/LithosPro-Black.svg’) format(“svg”),
url(‘http://padthai.decorolux.com/wp-content/fonts/LithosPro-Black.ttf’) format(‘truetype’);
font-weight: 700;
font-style: italic;
}

and added the TTF file.

Still doesn’t work on mobile… thoughts?

#6

Hi There,

I am not sure how it is working on desktop for you because you’re using a different font and it is not supposed to work. See this: https://screencast-o-matic.com/watch/cbQX6DIlw7
You have define Lithos Pro Black but then the header is set to use Lithos Pro. Can you try changing the font to Lithos Pro Black and then check again?

#7

Hi!

Done, same problem.
You were right in that I made an error though. I guess it displayed it to me because the font is installed on my system.
Anyhow, any idea why it still doesn’t work on mobile? Does it work on desktop for you now?

#8

Hi,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password
  • FTP credentials

All the best!

1 Like
#9

Hi Paul, secure note added.

Thanks!

#10

Hi There,

Though both fonts works on my end, I’d advice to moved the @font-face declaration on top of the child theme’s style.css file.

And then clear your phone’s browser cache, before you preview the site…

Thanks,

#11

Hi,

I tried adding the fonts to my child theme’s css.
Viewed from several devices, the font still doesn’t want to show up.

I’m looking at it from my iPhone 6 in incognito mode, so cache should not be an issue.

Any other ideas?

/ Edit /

I managed to make one of the fonts work with the following CSS:

@font-face {
font-family: ‘Lithos Pro Black’;
font-style: normal;
font-weight: normal;
src: local(‘Li Pro Black’), url(‘http://padthai.decorolux.com/wp-content/fonts/LithosPro-Black.otf’) format(‘opentype’);
}

@font-face {
font-family: ‘Lithos Pro Regular’;
font-style: normal;
font-weight: normal;
src: local(‘Lithos Pro Regular’), url(‘http://padthai.decorolux.com/wp-content/fonts/LithosPro-Regular.otf’) format(‘opentype’);
}

However, my second font, Lobster Two, still only works on desktop.

//Edit 2//

Managed to fix the other one two. The weird part is, the mobile does not seem to recognize: font-style:italic;
set it to normal, and wa-laa.

Thanks for the help!

1 Like
#12

Glad you sorted things out,

Cheers!