Custom font not loading on mobile

dcheese · May 9, 2019, 8:54am

Hello I’m working on a new website that uses a custom font. Font is not loading on mobile, can you have a look please?
I used a woff file.

paul.r · May 9, 2019, 10:04am

Hi @dcheese,

Please replace your fontface code with this

@font-face {
    font-family: 'Questa Grande';
    src: url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.eot');
    src: url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.eot?#iefix') format('embedded-opentype'),
        url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.woff2') format('woff2'),
        url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.woff') format('woff'),
        url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.ttf') format('truetype'),
        url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.svg#JellykaDeliciousCake') format('svg');
    font-weight: normal;
    font-style: normal;
}

Then in your elements change this css font-family: "Custom Font Family"; with this font-family: "Questa Grande";

Make sure you have uploaded the following files
2-questa_grande_regular_31-webfont.eot 2-questa_grande_regular_31-webfont.woff2 2-questa_grande_regular_31-webfont.woff 2-questa_grande_regular_31-webfont.eot.ttf 2-questa_grande_regular_31-webfont.eot.svg

Hope this helps

dcheese · May 9, 2019, 10:10am

what I have to put instead of JellykaDeliciousCake ?

paul.r · May 9, 2019, 10:25am

Hi @dcheese,

Sorry I missed that. please change it with this

#QuestaGrande-Regular

@font-face {
    font-family: 'Questa Grande';
    src: url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.eot');
    src: url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.eot?#iefix') format('embedded-opentype'),
        url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.woff2') format('woff2'),
        url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.woff') format('woff'),
        url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.ttf') format('truetype'),
        url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.svg#QuestaGrande-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Thanks

dcheese · May 9, 2019, 10:43am

Thank you Paul, still have the issue

thai · May 9, 2019, 11:46am

Hi There,

Would you mind providing us with login credentials(by clicking on the Secure Note button at the bottom) so we can take a closer look? To do this, you can make a post with the following info:

Link login to your site
WordPress Admin username / password

Thanks.

dcheese · May 9, 2019, 12:15pm

you can find it above, thank you!

paul.r · May 9, 2019, 1:11pm

Hi @dcheese,

I checked in mobile and it seems to work.

Can you provide us a screenshot on how it looks in your end.

Thanks

dcheese · May 9, 2019, 2:12pm

Hey Paul, the one on “Un luogo piacevole e rilassante…” is not the “Questa Grande” custom font. So I see what you can see. Please see on desktop how looks the font…

Prasant · June 6, 2019, 12:34pm

Hello @dcheese,

Thanks for updating the thread.

I checked the website and on my end custom font seems to be loading and working fine both desktop and mobile. Please see recorded screencast.

Desktop:

Mobile:

Please share a screenshot for us to take a closer look at the issue you are facing on your end.

Thanks.

dcheese · May 9, 2019, 7:27pm

Hello, the problem appears only on mobile, not on desktop browser… can you try on an iPhone or Android?

Prasant · June 6, 2019, 12:35pm

Hello @dcheese,

Thanks for updating the thread.

On my Android device it’s working fine. I also connected my phone via USB debugging to inspect the elements and too see the font that was loading, and it’s the same font that’s loading on the desktop.

Here’s a screenshot from my mobile.

Here’s a screenshot of the USB debugging on which I connected my mobile via USB to inspect the page.

Thanks.

dcheese · May 10, 2019, 12:43pm

Hello, can you see the website from an apple device like an iPhone?

paul.r · May 10, 2019, 12:56pm

Hi @dcheese,

The screenshot I provided above is from iphone6 plus

If you check on the link below, the font is the same

Thanks

dcheese · May 10, 2019, 1:11pm

Hello Paul, the font is the same of the screenshot provided by Prasant, please see it here

I see a Times New Roman on your screenshot…

paul.r · May 10, 2019, 2:04pm

Hi @dcheese,

Sorry, it’s almost the same on first look.
Please make sure you have these complete files.

2-questa_grande_regular_31-webfont.eot 2-questa_grande_regular_31-webfont.woff2 2-questa_grande_regular_31-webfont.woff 2-questa_grande_regular_31-webfont.ttf 2-questa_grande_regular_31-webfont.svg

I checked and it seems the svg file is missing.

You can convert your font file on the link below.

Thanks

dcheese · May 10, 2019, 3:40pm

Paul, the svg is there, but I noticed that the plugin you’ve suggested in another thread “Add From Server” doesn’t import the eot file. Any suggestion?

ruenel · May 10, 2019, 4:29pm

Hello @dcheese,

When using custom fonts, you normally have this code:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

.ttf, .woff and .woff2 is needed so that there is a font file fallback when the browser does not support the font file.

Hope this explains it briefly.

dcheese · May 10, 2019, 4:36pm

Hello, I understood.
The code I have in my css panel is

@font-face {
font-family: 'Questa Grande';
src: url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.eot');
src: url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.eot?#iefix') format('embedded-opentype'),
    url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.woff2') format('woff2'),
    url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.woff') format('woff'),
    url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.ttf') format('truetype'),
    url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.svg#QuestaGrande-Regular') format('svg');
font-weight: normal;
font-style: normal;

}

but on iPhone or Apple mobile the font is not loading. Please help

ruenel · May 10, 2019, 5:53pm

Hello @dcheese,

Yes your @font-face code is correct. But you also have this code:

@font-face{
    font-family:"Custom Font Family";
    src:url("https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.woff") format('woff');
    font-weight:400;
    font-style:italic;
}

And this code is what is being used for the “Un luogo piacevole e rilassante…”. I would highly recommend that you update your code into this:

@font-face {
	font-family: 'Questa Grande';
	src: url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.eot');
	src: url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.eot?#iefix') format('embedded-opentype'),
	    url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.woff2') format('woff2'),
	    url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.woff') format('woff'),
	    url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.ttf') format('truetype'),
	    url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.svg#QuestaGrande-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face{
    font-family:"Custom Font Family";
    src: url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.eot');
	src: url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.eot?#iefix') format('embedded-opentype'),
	    url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.woff2') format('woff2'),
	    url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.woff') format('woff'),
	    url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.ttf') format('truetype'),
	    url('https://staging.baitgiobbe.com/wp-content/uploads/2-questa_grande_regular_31-webfont.svg#QuestaGrande-Regular') format('svg');
    font-weight:400;
    font-style:italic;
}

Please let us know how it goes.