Issues with font and alignment in Slider Revolution

Hi

I have 5 slides in slider revolution which display testimonials. When I view my website on my desktop the font and alignment are all as they should be. However, when viewed on my mobile device the font style is not right (it should be League Spartan but is currently showing as a default font) and the alignment of the text is to the left when I’ve set it to centre.

Grateful for any help you can provide please.

A quick update for you: I’ve solved the alignment issue, just the font issue remains now. Thanks :slightly_smiling_face:

Hi Caroline,

Thank you for writing in, glad you sorted the alignment issue.I see that you’re using the font ttf file. Please use the woff or woff2 file format instead.

Font Manager can be accessed under X > Theme Options



Font Manager

Hope it helps,
Cheers!

Thanks. When I first started the site I tried to upload many different .woff and .woff2 files for the font but this message is always displayed:

Any further thoughts please?

Hello Caroline,

Please follow the suggestions in this thread:

Hope this helps.

Hi,

I’ve tried following those instructions, but it doesn’t appear to have helped. To be specific I have done the following in order -

  1. Installed and activated an x-child theme
  2. Used cPanel FileManager to create a sub-folder called fonts in [site]/public_html/wp_content/themes/x-child
  3. Edited the file [site]/public_html/wp_content/themes/x-child/functions.php to contain the below:

// Additional Functions
// =============================================================================
add_filter(‘upload_mimes’, ‘add_custom_upload_mimes’);
function add_custom_upload_mimes($existing_mimes) {
$existing_mimes[‘woff’] = ‘font/woff’;
$existing_mimes[‘woff2’] = ‘font/woff2’;
$existing_mimes[‘ttf’] = ‘application/x-font-ttf’;
$existing_mimes[‘svg’] = ‘image/svg+xml’;
$existing_mimes[‘eot’] = ‘application/vnd.ms-fontobject’;
return $existing_mimes;
}

Tried to upload a woff via the custom fonts section of the font manager in X - Options

That didn’t work. Still couldn’t upload the fonts - still get the security error.
I also tried using the cPanel file manager to upload the font to the font directory - and that worked, but the mime type was not set to font/woff and it wasn’t available to select in the X-Options font manager.

What am I doing incorrectly?

Thanks!

Hello Caroline,

Please install “Disable Real MIME Check” plugin.
You may need to check this thread:

Hope this helps.

Hi again

I’ve done everything that you’ve suggested and the League Spartan font is still not displayed when viewing the slider on a mobile device. Do you have any further suggestions as to what I can do please?

Thanks

Hi Caroline,

In that case please provide us login credentials in a secure note so we can take a closer look. And please let us know which page did you place the slider and what slider you’re having the issue.

Thanks,

Hi

You should now be able to see the secure note with my login credentials. The slider is near the bottom of the homepage and has the title ‘Customer Feedback’. It shows different quotes from testimonials that my clients have written for me. As explained previously the League Spartan font shows up fine when viewed on a desktop but isn’t displayed on mobile devices - it seems to revert to Arial.

www.makeitdone.co.uk

Really hoping you can fix this for me. Thanks very much :slight_smile:

Hello Caroline,

Do you have any other League Spartan font files aside from the *.woff format? If you have ttf, eot, etc, you may also include it to make sure that the font will be cross browser compatible.

Adding those files is necessary because the output would be like this for browser compatibility:

@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 */
}

We would loved to know if this has work for you. Thank you.

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