Font-family in Revolution Slider not loading on mobile

knowmates · October 11, 2019, 8:37am

Hi there,

on one of our websites we don’t use Google fonts via the Google servers and are loading the fonts directly from our server. We put the code to load the fonts into the CSS via Theme Options.

That works quiet fine but in the revolution slider the font-family is not loading on mobile devices. The font showing up here looks like Times New Roman.

How can we solve that problem?

Best regards

lely · October 11, 2019, 10:49am

Hi @knowmates,

I can see the issue even on desktop. Some fonts are missing returning 404. See screencast.
For the font declaration to work, please move it instead on your child theme style.css file. All those @font declaration should be on style.css file of the child theme at the very top of the file. Try checking again after.

Let us know how this goes.

knowmates · October 14, 2019, 6:52am

Hi there,

I just copied the CSS font code to the top of the child theme style.css file and deleted it under Theme Options > CSS but I guess it just does not work consistently. In the browser of a One Plus 3 (Brave Browser I guess) it works quiet fine but on iPhones and iPads there is still a font looking like Times New Roman.

Prasant · October 14, 2019, 4:31pm

Hello @knowmates,

Thanks for updating the thread.

Can you please check with hosting provider if there’s issue with website as on my end website is not loading? I am getting following error message This site can’t be reached.

Thanks.

knowmates · October 15, 2019, 5:44am

Hello @Prasant,

I just checked it and there seems to be no issue with the website. It is loading just as it did all the time before.
Would you mind trying again?

Thanks in advance!

friech · October 16, 2019, 1:21am

Hi @knowmates,

Thank you for writing in, the site is still not loading your font files. I have checked the font file source on your child theme’s style.css file, but it seems they are not translated to the correct path (see those URL below, it returns 404).

And please add your @font-face statement just below the:

/*

Theme Name: X &ndash; Child Theme
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 6.0.4
Template: x

*/

Please redo your @font-face declaration and follow thoroughly the guide I’ve provided here.

Let us know how it goes,
Cheers!

knowmates · October 16, 2019, 7:19am

Hi @friech,

I just checked the guide you provided. The font-URLs do not lead into an error anymore. Furhtermore the download popup of the font shows up. So I guess that is correct now. Thanks for that!

Since the update to the newest version the Revolution Slider was also updated.

By the way the new layout is pretty bad because there are a lot of fields and stuff that lay on each other so lots of information are not readable. Is that fixable?

When I change the first line of the slider on the homepage via inline css (e. g. ‘text’) it works on the desktop view. How can I change the mobile view in the new version of the Revolution Slider?

Best regards

knowmates · October 16, 2019, 7:35am

ruenel · October 16, 2019, 8:25pm

Hello @knowmates,

Since you are using Page Speed plugin, please clear your site cache first amd regenerate the minified JS and CSS before testing your site again. After doing the updates, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) so that the code from the latest release is always in use. This will help you to avoid any potential errors.

And please clear your browser cache too. You may use private browsing mode in testing your site to make sure that you are viewing the latest codes from the updates and not the cached version in your browser.

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.

knowmates · October 17, 2019, 9:12am

Hello @RueNel,

we just cleared the cache via the used plugin WP-FFPC. Since we are not using a special plugin to regenerate the minified JS and CSS I was not able to do that.

I just checked the functionality in a private browser but the problem still exists.

Please have a look at the provided data in the secure note.

Best regards

rad · October 17, 2019, 4:35pm

Hi @knowmates,

Using a private browser will only skip or ignore the browser cache, but it has no effect if the server still serves the cache.

I deactivated the WP-FFPC and Remove Google Fonts References plugin, and your slider is now working.

The plugin Remove Google Fonts References removes the font references, that includes the icons of the slider. And all icons are just fonts.

Thanks!

knowmates · October 18, 2019, 6:24am

Hello @Rad,

thanks for the answer but unfortunately that is not a satysfing solution for us. We used the Remove Google Fonts References plugin because we don’t want a connection to the fonts.googleapis.com and fonts.gstatic.com. Therefore we implemented the fonts as described above by @friech.

The way I see it there is no way to use the Remove Google Fonts References plugin and the Revolution Slider because the fonts in the slider backend are ‘blocked’ by the other plugin. So everytime we want to update a slider we have to deactivate the other plugin and after finishing the slider we can reactivate it.

Is that right or is there any other solution?

I just checked our staging website. The slider works quiet fine although the Remove Google Fonts References plugin and WP-FFPC are activated.

Best regards

ruenel · October 18, 2019, 8:44pm

Hello @knowmates,

You will have to synchronize the activation and deactivation of the plugins when doing the updates. I would recommend deactivating Remove Google Fonts References plugin and WP-FFPC plugin first and then update the slider plugin. After the update, WP-FFPC should be the last to be activated so that the latest codes of the site after the updates will be cache and not the other way around. If one plugin is activated before the other, old files might be cache by WP-FFPC which will create head-scratching caching issues.

Hope this helps.

knowmates · October 25, 2019, 12:54pm

Hello @RueNel,

I just followed your steps but after updating the revolution slider and then reactivating the Remove Google Fonts References plugin the Revolution Slider didn’t load the icons successfully. Of course after reactivating WP-FFPC it did not load properly neather.

Do you have any other ideas? It seems as we ‘only’ need to exclude the Revolution Slider from the Remove Google Fonts References plugin. Otherwise I can only think of deactivating the Remove Google Fonts References plugin, edit the slider and reactivating the Remove Google Fonts References plugin again.

Best regards

ruenel · October 25, 2019, 9:28pm

Hello @knowmates,

If that is the case, then Remove Google Fonts References did also removed the icon fonts in the slider while you are in the admin panel. The plugin should only remove the fonts on the frontend so that it will not affect other plugins in the backend. There is only one way of resolving this for the moment and that is to deactivate the Remove Google Fonts References plugin, edit the slider and reactivating the Remove Google Fonts References plugin again.

Hope this helps.

system · November 4, 2019, 9:28pm

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