Uploaded font not loading on mobile

[andrewwolff]

Hello, I have uploaded a font, and it seems to be loading properly on desktops, but it is not loading on mobile. It’s a display font, so it’s very easy to notice. What I have in the Global CSS is…

@font-face {
font-family: ‘stone-serif-bold’;
src: url(‘http://andrewswolff.com/wp-content/themes/x-child/fonts/stone-serif-bold.eot’);
src: url(‘http://andrewswolff.com/wp-content/themes/x-child/fonts/stone-serif-bold.eot?#iefix’) format(‘embedded-opentype’),
url(‘http://andrewswolff.com/wp-content/themes/x-child/fonts/stone-serif-bold.woff’) format(‘woff’),
url(‘http://andrewswolff.com/wp-content/themes/x-child/fonts/stone-serif-bold.ttf’) format(‘truetype’),
url(‘http://andrewswolff.com/wp-content/themes/x-child/fonts/stone-serif-bold.svg#stoneserifbold’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

I’m hosting through Bluehost, and all the files seem to be in the right place, but I must be missing something. Can you help me solve this?

[jade]

Hi there,

I have just checked your page on my phone and the font seems to be loading fine:

Kindly try to clear your cache.

Thank you.

[andrewwolff]

Strange, it still isn’t working for me even after clearing the cache. What concerns me more now though is the layout on your screen is completely different than what I’m seeing. It should look like the image below, but with the correct font.

https://drive.google.com/file/d/1cCdFVmuJxGztpkndtRSd3RSSo4Se64Xlnw/view

How can I fix these issues?

[friech]

Hi There,

We can’t access your screenshot, please upload screenshot here instead.

Three issues I saw here, first @font-face { } does not work on Theme Options > CSS, please move that to your child theme’s style.css file.

Second, your site is in https:// while your font source (src url) is http:// more likely your site will blocked it.

Third, you named your font as ‘Stone Serif Bold’, not ‘stone-serif-bold’ please correct that on your inline CSS.

Hope it helps,
Cheers!

[andrewwolff]

Here’s the photo https://prnt.sc/i9qbt3

I’ll make those changes, and see how it works! Where have I named it Stone Serif Bold? I’m not seeing that.

[friech]

Hi There,

Your font looks correct now

I see that you moved the @font-face { } declaration on the Customizer > Additional CSS, that works too, as long as it is on the top. I also see that you address the other 2 issues.

Cheers!

[andrewwolff]

The buttons are still stacking on certain screen widths. How can I resolve that?

[rad]

Hi there,

Should the buttons stay inline? In that case, please add this CSS too.

@media ( max-width: 767px ) {
.home .el12.x-text .x-btn {
width: 47% !important;
}
}

Hope this helps. Thanks!

[andrewwolff]

That is only correcting the buttons on the top of the page, I have the same buttons near the bottom of the page as well. How can I have this correct all of them?

[paul.r]

Hi,

You can add a class to your text elements where your button resides.

eg. Add my-buttons

Then change the css code provided above to this.

@media ( max-width: 767px ) {
      .my-buttons.x-text .x-btn {
           width: 47% !important;
      }
}