[Resolved] local font not displaying on mobile

[Stacy]

Hi

I have been working on building a site and was looking to use a custom font so I followed the tutorial on the documentation page https://docs.generatepress.com/article/adding-local-fonts/

I am able to select the font in the customiser and it displays fine on the desktop however, it’s not showing on any mobile devices.

Can you please let me know where to correct this issue? I am using Quicksand regular and 700 for all the content and headings on the site.

My site: https://stacyc7.sg-host.com/

CSS:
/* quicksand-regular – latin */
@font-face {
font-family: ‘Quicksand’;
font-style: normal;
font-weight: 400;
src: url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.eot’); /* IE9 Compat Modes */
src: local(”),
url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.woff’) format(‘woff’), /* Modern Browsers */
url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.svg#Quicksand’) format(‘svg’); /* Legacy iOS */
}

Any help would be appreciated, thanks.

[Ying]

Hi there,

The font doesn’t work on my end both desktop and mobile.

It works on your desktop might because you’ve installed the font locally on your computer.

Can you wrap your CSS with the CODE tag and share it again so I can see the original code?
https://www.screencast.com/t/1dSE8PjOdyb8

[Stacy]

`/* quicksand-regular – latin */
@font-face {
font-family: ‘Quicksand’;
font-style: normal;
font-weight: 400;
src: url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.eot’); /* IE9 Compat Modes */
src: local(”),
url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.woff’) format(‘woff’), /* Modern Browsers */
url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.svg#Quicksand’) format(‘svg’); /* Legacy iOS */
}

[Stacy]

I just noticed that I am missing the 700 font weight from the css code I grabbed from the additional CSS section. I think I found my error. I am going to redo the css and see if that fixes it.

[Stacy]

`/* quicksand-regular – latin */
@font-face {
font-family: ‘Quicksand’;
font-style: normal;
font-weight: 400;
src: url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.eot’); /* IE9 Compat Modes */
src: local(”),
url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.woff’) format(‘woff’), /* Modern Browsers */
url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.svg#Quicksand’) format(‘svg’); /* Legacy iOS */
}
/* quicksand-700 – latin */
@font-face {
font-family: ‘Quicksand’;
font-style: normal;
font-weight: 700;
src: url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-700.eot’); /* IE9 Compat Modes */
src: local(”),
url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-700.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-700.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-700.woff’) format(‘woff’), /* Modern Browsers */
url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-700.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-700.svg#Quicksand’) format(‘svg’); /* Legacy iOS */
}

[Stacy]

my apologies for the css error, I am new at this. I updated the css, but am still seeing the issue.

[Stacy]

/* quicksand-regular - latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: url('http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-regular.svg#Quicksand') format('svg'); /* Legacy iOS */
}
/* quicksand-700 - latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  src: url('http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-700.woff') format('woff'), /* Modern Browsers */
       url('http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('http://stacyc7.sg-host.com/wp-content/uploads/2022/09/quicksand-v30-latin-700.svg#Quicksand') format('svg'); /* Legacy iOS */
}

[Ying]

Well, you didn’t wrap the code with the closing tag.

But it’s ok, I found the code in your site’s source code.

Everything looks correct, tested the font links, and they are working fine too.

I don’t see an obvious reason why it’s not working.

Any chance you can provide an admin login so we can take a look at the backend?

Let me know 🙂

[Stacy]

What would be the best way of doing that? Sorry very new to this.

[Stacy]

To get you the admin login, I am using the email support@generatepress.com and Ying as the user and https://generatepress.com/ as website. Email if this info is not correct.

[Ying]

The email and username works for us.

You can add sensitive info like password/login link into the private info field, it will only be seen by the support team 🙂
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Stacy]

you’ve been given admin access, the password is in the private info section. Let me know what to do from here please.

[Ying]

Thanks for the login info.

Can you try to replace the http with https in the font links of the @font-face CSS?

Let me know if this works.

[Stacy]

Yay, that worked. Thanks for catching that. I think this is resolved, thanks again for your help and patience 😉

[Ying]

You are welcome 🙂

Glad to help!

[Author]

Posts