How to Use Custom Font in Revolution Slider

Revolution Slider is one of famous sliders for WordPress. It is very innovative, easy to use and responsive slider. There are numbers of websites and premium WordPress themes that are using Revolution Slider.

Today, one of my clients 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. If you are not familiar with this task, kindly follow the steps below to add the custom font into theme.

How to add custom font in WordPress theme

Find the font you want to convert (TTF or OTF format).
To convert the font, you like into webfont you can use online services. There are a lot of online font convertor available but I am used to use font2web.com.
So, I am Converting Argent CF font to WebFont.

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.
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. (webroot directory/wp-content/themes/YOUR-THEME)

Note: you can access theme directory via cPanel or using ftp.

In font folder, open fonts.css file and copy the code from the file.
Go into your theme folder again and open style.css file.
Paste the code you just copied from fonts.css file. Here is how the code should look like but with your own font names.

@font-face {
	font-family: 'Conv_Argent CF Regular';
	src: url('fonts/Argent CF Regular.eot');
	src: local('☺'), url('fonts/Argent CF Regular.woff') format('woff'), url('fonts/Argent CF Regular.ttf') format('truetype'), url('fonts/Argent CF Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

Note: you can access theme directory via cpanel or using ftp.

Copy the line that says “font-family: ‘Conv_Argent CF Regular’;”.
Open Revolution Slider and select the slide where you would change the font.
Select the text layer you want to change the font for and open style on/off settings and choose advance css tab.

Click layer under advance CSS tab. It should open like this paste your font-family line.

font-family: 'Conv_Argent CF Regular';

Hit save.

Yay! that should be it, reload the page and you should have now the custom font on Revolution slider.

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