Using your own fonts

If you have any font loading on your website, and you want to use that font in our slider, all you need to do is to write that font's name into to the Font family field. If you don't have that font loading in your website, call it in, as you can read in the documentation of where you got that font, or lower here.

Smart Slider 3 recognizes Google fonts automatically as well, so in that case again, all you need to do is to write their names to the Font family field.

If only your frontend theme/template calls in the fonts, they won't work in the backend. In this case, please check out this part of the tutorial, to learn how to call the fonts in your backend.

You must call the custom fonts using the name they were defined with. For instance, if the font "Open Sans" was defined by the name of "MyFont" then it must be used as "MyFont" otherwise the browser won't be able to render it.

Adding a new font won't make it automatically appear in the suggested font drop down list! If you want your font to appear there, go to the Global settings - Fonts and put it to the text area.


If your font is already loaded by your theme, simply put the name of the font (e.g. 'My font') to the Font Manager's Family field.

If you want to use a font file to load your own font, you should put it into your theme's or template's CSS code:

Joomla: templates\[your template]\style.css
WordPress: wp-content\themes\[your theme]\style.css

By using font-face:

    font-family: 'My font';
    src: url('');

Then make sure that the font was uploaded to the path you gave to the src value.

If you load a font to your frontend and use a page builder, you probably won't be able to see the correct fonts during page editing. That's because the sliders are loaded in a special way to a page builder's editor, via iframe, and iframes can't interact with the site's content. So the font family is not available there. But once you exit the page builder, the fonts will load correctly.


The fonts added to your frontend template won't be loading on your backend. If you want them to load in your backend too, you should create a CSS file and upload it to your FTP and put the font-face code there. Then you can make this CSS file load at our backend if you go to the Global settings ->  Editor - additional CSS files.

Other methods

You can also load fonts with JavaScript, for example Typekit does that. You should look around in their documentations, how it should be done or contact their support, if you are not able to call in the given font.

From our end there is nothing you have to do, just write its name into the Family of the font, and if the font is loading in your website, our slider will use it.


If your font won't load for some reason, use Chrome to figure out the problem. Press F12 -> click on Console -> refresh the page, where the font should load. This can write out problems, like you gave a wrong url to the font file or your server blocks this file.

If that won't show anything, in your Chrome if this developer tools isn't opened press F12 again -> press Ctrl + SHIFT + F -> search for your code's parts to see if you can find it, like search for the url or the font family name if it is unique enough to find it easily. This search returns every result, which can be found within all the files and codes loaded by your website. If you won't be able to find your font incalling here, then your code was either inserted into the wrong place or some kind of cache doesn't load the new version of your file. Press Ctrl + F5 to make sure your browser's cache doesn't load the previous file. If you have some other cache on your website, clear its cache too! If you are pretty sure you don't have any cache, then you might have edited a wrong file or there was something going wrong with the saving and the file wasn't modified.