Custom font not working on mobile phones

Hi - i have been through the full forum and have not been able to find a fix which works specifically for my site. I have added the following code to Global CSS:

@font-face {
font-family: ‘WildSpirit’;
src: url(‘https://flockbynature.co.uk/wp-content/themes/pro-child/font/WildSpirit.eot’)
src: url(‘https://flockbynature.co.uk/wp-content/themes/pro-child/font/WildSpirit.eot?#iefix’) format(‘embedded-opentype’),
url(‘https://flockbynature.co.uk/wp-content/themes/pro-child/font/WildSpirit.woff’) format(‘woff’),
url(‘https://flockbynature.co.uk/wp-content/themes/pro-child/font/WildSpirit.woff2’) format(‘woff2’),
url(‘https://flockbynature.co.uk/wp-content/themes/pro-child/font/WildSpirit.ttf’) format(‘truetype’),
url(‘https://flockbynature.co.uk/wp-content/themes/pro-child/font/WildSpirit.svg#svgFontName’) format(‘svg’);

font-weight: normal;
font-style: normal;
}

It works fine on Safari and Chrome but not iOS
My site is www.flockbynature.co.uk

Thank you in advance
Annie

Hello Annie,

Thanks for writing in! Since you have installed a caching plugin WP Rocket, please clear your plugin cache before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

And please clear your mobile phone browser’s cache. You can also use private browsing mode or incognito mode and test your site in your phone again.

Please let us know how it goes.

Hi - I have cleared the cache several times (incl purge) and also checked in Private mode on the devices but it still isn’t working. I have checked on multiple devices

Thanks

Hi @Colley,

How about disabling them for now while we’re checking? I checked and they are still served from cache especially the minified files (example https://flockbynature.co.uk/wp-content/cache/min/1/99e4e8d7248250d702af918a6608434c.js).

And so we can test it on our devices while making sure we’re not seeing the cache served by the server. It’s not that we’re saying purging is not working, we just like to test it without any active cache.

Thanks!

Ah OK. I have deactivated…

Hi @Colley

I’ve checked your website on iOS 11.4 and I can see the font is loading fine:

However, I noticed that you are running an old version of Pro theme, you need to follow this guide to update the theme to the latest stable version:

Also, let us know on which devices exactly you are getting this issue? perhaps providing some screenshots would be helpful.

Thanks.

Hi, I have completed the Theme Update

The screenshot you sent through shows the error I’m seeing (i.e. the WildSpirit font is not showing as a ‘handwritten’ font.)

I have attached a screenshot of what it should look like, as per desktop

Thanks

Hi Annie,

There is a typo on your code above, please update that to this:

@font-face {
font-family: 'WildSpirit';
src: url('https://flockbynature.co.uk/wp-content/themes/pro-child/font/WildSpirit.eot'),
url('https://flockbynature.co.uk/wp-content/themes/pro-child/font/WildSpirit.eot?#iefix') format('embedded-opentype'), 
url('https://flockbynature.co.uk/wp-content/themes/pro-child/font/WildSpirit.woff') format('woff'),
url('https://flockbynature.co.uk/wp-content/themes/pro-child/font/WildSpirit.woff2') format('woff2'),
url('https://flockbynature.co.uk/wp-content/themes/pro-child/font/WildSpirit.ttf') format('truetype'),
url('https://flockbynature.co.uk/wp-content/themes/pro-child/font/WildSpirit.svg#WildSpirit') format('svg');
	font-weight: normal;
	font-style: normal;
}

Remember to clear all your cache after the changes including your mobile’s browser cache.

Hope it helps,
Cheers!

Hi there - thank you for spotting it. I have copied your code directly into my Global CSS and cleared the cache but it still hasn’t fixed it. Thanks

Hey Annie,

I pasted the code @friech posted in my test site’s Global CSS and the font works.

But, it does not work in your site.

This is not a theme issue otherwise, I’ll get the same result. It’s not a font loading issue either because the font is there but it just won’t work in your site only. This tells us that there’s something in your setup that is causing this. Please note that at this stage, this is no longer our responsibility as first, this involves a custom font. Second, I have found out that this issue was not caused by the theme.

We would be happy if this gets resolved but, just note that we could not guaranteed a fix and we also would need your cooperation.

We would need that you clear all caches again and deactivate your caching plugin. Then, clear your browser’s cache and test if the issue persists. Also check in incognito mode.

If that does not help, deactivate all third party plugins then check again if the issue persists.

Also give us WordPress Admin access in a Secure Note so we could check your setup.

Thanks.

Hi

Thanks, I have tried all of the above but still no luck. I have one other custom font (Stela_UT) installed on my site which works perfectly… so is it the font itself that is the problem?
I appreciate that this isn’t a theme issue anymore so I am very grateful for any help you can give

Thanks.
Annie

Hi Annie,

Thank you for the credentials, so this issue is two-fold, the first issue is solved by the updated code I have provided above, and the second issue is this:



You miss the closing bracket of your @media (min-width: 768px) query, that means all custom CSS after that will be included in that block.

What happening is, when you viewed your site on screen 767px and below (tablet/mobiles). The @font-face statement for the WildSpirit will not be triggered.

Please add the missing closing bracket, and moved your @font-face statement on the top of your custom CSS.

Remember to clear all your cache after the changes including your mobile’s browser cache.

Cheers!

Thank you so much! That worked. Your service is amazing… thank you!

You’re most welcome :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.