Adding a custom font to Revolution slider

Support
#1

Hi,
I am wanting to add a custom font to Rev slider. I know this has been asked before but the links given just lead to the main page of Theme Punch and I can’t seem to find what i’m looking for.
I saw that others have mentioned using CSS but my font didn’t come with CSS.
Can you please tell me how to add the font?
Thanks,
Liz

Slider Rev fonts- have tried everything
#2

Hi Liz,

You can use the FontSquirrel web font generator to generate the CSS code for the custom font you have:

Once you have the font face code, you can add it in X > Theme Options > CSS:

Then go back to the slider editor and edit the text element settings and in the layer’s Advanced CSS add the code:

{
  font-family: "the_font" !important;
}

Please change the_font in the code above to the correct font value.

Kindly note that you will not see the font changed in the slider editor but only in when you view the slider.

Hope this helps.

Custom Font With Slider Revolution
#3

Hi Jade,

I’m sure i’ve done everything as you explained but it still isn’t working. I can’t seem to get the new font (dreamlandregular) as the font on my slider. I want it for the state name (not ‘Discover’) on each slide.

I have tried deactivating all my plugins but there was no change. Is there anything else I could try?

Thanks :slight_smile:

#4

Hi Liz,

Can you share your site URL and wordpress admin credentials inside a secure note so we can check what you have so far? Please also include the slider where you are implementing this and the exact CSS you have added. Also include the page where is this slider is added. Thank you.

#5

Hi Lely,
I have added a secure note with your requests in the initial question box above.
Thanks,
Liz

#6

Hi Liz,

Please remove this block of code in the Global JS:

{
    font-family: 'dreamlandregular';
    src: url('dreamlands-webfont.woff2') format('woff2'),
         url('dreamlands-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

You should put the code:

@font-face {
    font-family: 'dreamlandregular';
    src: url('dreamlands-webfont.woff2') format('woff2'),
    url('dreamlands-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

You will have to update the value in the URL part of the code.

Please login through FTP go to wp-content/themes/x-child then add the directory fonts in there. Go in the fonts directory then upload the dreamlands-webfont.woff2 and dreamlands-webfont.woff then update these lines of code:

    src: url('dreamlands-webfont.woff2') format('woff2'),
    url('dreamlands-webfont.woff') format('woff');

to:

    src: url('https://outbackandbushaustralia.com/wp-content/themes/x-child/fonts/dreamlands-webfont.woff2') format('woff2'),
    url('https://outbackandbushaustralia.com/wp-content/themes/x-child/fontsdreamlands-webfont.woff') format('woff');

Hope this helps.

#7

I have followed your instructions as best as I can but still no change. The Global JS didn’t have the code you asked me to change but the CSS did, so I assumed that’s what you meant.

The ‘South Australia’ in the slider still remains the same. I’m sure I have some setting there somewhere that’s overriding things.

#8

Hello @liz80y,

The css did not work because the font file does not exist in its file location:

The links only goes to a Page not Found page. Please make sure that you have uploaded the font file in the correct location.

Please let us know how it goes.

#9

Hi RueNel,

This is where I placed the files in cpanel…

public_html/wp-content/themes/x-child/fonts

Both files are definitely in there…?

#10

Ok. Think I have it working now!

I’ll check it out and let you know asap if there are any issues. Thanks :slight_smile:

#11

Hey @liz80y,

We are just glad that you have figured it out a way to correct the said issue.

Best Regards.

#12

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