webfont not working on mobile

[hau]

Hey,
so far loving your theme. I just have an issue with a webfont that i’ve bought. It’s loading completely fine on desktop, but won’t show on mobile. It’s loading “Roboto” from Google Fonts instead. Any ideas?

[SeaTheme]

Hi,

Please leave your page URL, I will test it, thanks!

Regards!
Bwsm – uiueux.com – Twitter – Facebook

[hau]

Hi,
here is the url:
http://work.sueperdesign.com/klebebande2018

Typeface is called “Jaroslav”

Thank You!

[SeaTheme]

Hi,

I checked your web page. The font works on ios, doesn’t work on android.
I did not see any issue report, it is really strange thing. I googled many pages but found nothing.
I guessed the it doesn’t load font files from myfont(http://hello.myfonts.net/count/369c61) only on android.

I created a demo page with @font-face here(the font files hosted on my own server), it works on android.
I suggest you host the font files on your own host server also.

The screenshots of my demo page:

Regards!

[SeaTheme]

This reply has been marked as private.

[hau]

This is strange, because it used to load on android, too. All of a sudden it stopped. Maybe it happened while playing around in css to render the fonts nicely.

Thanks for trying to solve the problem.

[hau]

Happy you like it. I will talk to my partners about it and will then let you know.

Cheers
Hau

[hau]

Hi,
i just found out what might be the reason.

In custom css, when i put in these lines (from myfonts install kit) it also loads on android:

h1, h2, h3, h4, h5 {
font-family: JaroslavBold-Bold;
font-weight: normal;
font-style: normal;
}
h1, h2, h3, h4, h5 {
font-family: JaroslavRegular-Regular;
font-weight: normal;
font-style: normal;
}

Problem is, it doesn’t look good and doesn’t load the real typeface when i set text in “bold”, instead it creates a bold version. To resolve this i put in theses lines instead:

h1, h2, h3, h4, h5 {
font-family: ‘Jaroslav’, default1, default2, default3;
font-weight: bold;
font-style: normal;
}
body {
font-family: ‘Jaroslav’, default1, default2, default3;
font-weight: normal;
font-style: normal;
}

Now the font renders nicely, but it doesn’t load on Android. Also, like you suggested, the font is hosted on the hosts server. Do you see what the problem is?

[SeaTheme]

Hi,

I checked again, it is same as yesterday.

You said:

Also, like you suggested, the font is hosted on the hosts server. Do you see what the problem is?

Where is your own @font-face codes?

I found there still this CSS linked: http://work.sueperdesign.com/klebebande2018/wp-content/plugins/Jaroslav/Jaroslav.css?ver=4.9.5
I mean you should @font-face the font files from your own host instead by this CSS

Regards!

[hau]

This reply has been marked as private.

[SeaTheme]

The css and font files not linked,
https://www.dropbox.com/s/nkzxie3ipoit8lq/QQ20180516-160700%402x.jpg?dl=0

[hau]

This reply has been marked as private.

[hau]

This reply has been marked as private.

[SeaTheme]

Hi,

Please use full css URL here: https://www.dropbox.com/s/belg3ut2d1wtlnx/Bildschirmfoto%202018-05-16%20um%2010.50.51.png?dl=0
<link rel="stylesheet" type="text/css" href="http://work.sueperdesign.com/klebebande2018/MyFontsWebfontsKit.css">

Please use font file full URL in MyFontsWebfontsKit.css
@font-face {font-family: 'JaroslavRegular-Regular';src: url('http://work.sueperdesign.com/klebebande2018/webfonts/36A566_0_0.eot')...

——————————–
If it doesn’t work, please send this post URL and wp-admin(url/user/pass) to uiueux@gmail.com, I’ll log in to check it.

[hau]

Hi,
didn’t work. I will send you an Email.

[hau]

This reply has been marked as private.

[hau]

This reply has been marked as private.

[SeaTheme]

This reply has been marked as private.

[Author]

Posts