Revolution Slider is one of famous sliders for WordPress. It is very innovative, easy to use and responsive slider. There are numbers of website and premium WordPress themes that are using Revolution Slider. Today, one of my client ask me that will you be able to use custom font in Revolution slider? I was sure I will handle this job. I searched ThemePunch website for Revolution Slider documentations. But I have not found any convincing help for how to use custom font in Revolution Slider. So, I am sharing my experience of using custom font in revolution slider.

Custom Font in Revolution Slider

First of all, you need to add that custom font into your WordPress theme, follow the steps below to add the custom font into theme.

  1. Convert the font you like into webfont. There are a lot of online font convertor available but I am used to use font2web.com.
  2. Find the font you want to convert (TTF or OTF format).
  3. I am Converting Argent CF font to WebFont.
    how to custme font in revolution slider
  4. Upload font file using Choose File button on font2web.com. Make sure file is uploaded. Once you done uploading font, hit CONVERT & DOWNLOAD button. A zip file containing converted font will download.
  5. Open downloaded zip file and extract it, you will see there is a folder name “Fonts”. Copy that folder and upload it to your theme directory.
    Note: you can access theme directory via cpanel or using ftp.
    how to custom font in revolution slider 1
  6. Now open fonts.css file and copy the code go into your theme’s style.css file.
  7. Paste the code you just copied from fonts.css file.Here is how the code should look like that you paste but with your own font names.
    how to custom font in revolution sliderNote: you can access theme directory via cpanel or using ftp.
  8. Copy the line that says “font-family: Conv Argent CF Regular”.
  9. Open Revolution Slider where you would like to change the font.
  10. Select the text layer you want to change the font on and open style on/off settings and choose advance css tab.
    how to custom font in revolution slider
  11. Click layer link below advance CSS tab it should open like this paste your font-family line.
    how to custom font in revolution slider
  12. Hit save.
  13. Yay! that should be it, reload the page and you should have now the custom font on Revolution slider.

 

We learn how to add a custom font into WordPress website and also how to select that custom font on revolution slider.