Adding a custom font to Slider Revolution Plugin for WordPress has now been made super easy, but I couldn’t find updated instructions online (as of October 2019), so I thought I’d share. Everything I tried wasn’t working and I wasted hours trying to make something simple work.
There are many steps to this easy process, so I am going to assume you’re starting from zero.
Converting and uploading the fonts and files
- Convert your font to webfonts. I used FontSquirell to convert the ttf file to a series of webfonts.
- Using your favorite FTP program or cPanel from your hosting provider, create the folder /webfonts in /wp-content.
- Using the @font-face CSS, modify the URLs in the stylesheet.css file that you downloaded with the webfonts to be absolute for your site. You’re using https, right? Don’t want to be serving insecure urls when you have https enabled site-wide.
- Upload the contents of the fonts folder you downloaded to /wp-content/webfonts/ .
@font-face {
font-family: 'YourFontFamily';
src: url('https://www.samplesite.com/wp-content/webfonts/fontname-webfont.eot');
src: url('https://www.samplesite.com/wp-content/webfonts/fontname-webfont.eot?#iefix') format('embedded-opentype'),
url('https://www.samplesite.com/wp-content/webfonts/fontname-webfont.woff') format('woff'),
url('https://www.samplesite.com/wp-content/webfonts/fontname-webfont.ttf') format('truetype'),
url('https://www.samplesite.com/wp-content/webfonts/fontname-webfont#fontname') format('svg');
font-weight: normal;
font-style: normal;
}
Modifying your child-theme
- Be sure you are using a child-theme, otherwise any updates to your theme will be overwritten. In your child-theme, modify your functions.php and style.css files to include the new font-family.
- Open your child-theme folder/functions.php and insert the following code, being sure to….
- Change the YourFontFamily to then name of your font and the url to the absolute URL path to the fonts’ files.
- Then open style.css in your child-theme and copy and paste the @font-face CSS code above, again with absolute URLs.
if (!function_exists('additional_font_styles')) {
function additional_font_styles () {
wp_enqueue_style('YourFontFamily', 'https://www.samplesite.com/wp-content/webfonts/');
}
add_action('wp_enqueue_scripts', 'additional_font_styles');
}
Slider Revolution Settings
- In Slider Revolution go to the very front page of the plugin and at the top you’ll see icons. Click on “Globals”
- Add the font-family name that you included in your functions.php and style.css files.
- Start using YourFontFamily in the pull down menu of the slide editor. No need to add custom CSS to the layer.
Bravo, you have added a custom font to Slider Revolution WordPress Plugin v6 with very little fuss. Now, make beautiful content using your chosen font.
If you want to hire me to build your website, please get in touch for a proposal and quote.
digital doula, builder-of-websites, photographer, wife, mother, daughter, sister, aunt, woman, immigrant, friend, traveler, geek, and observer