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 by your theme. 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 Nextend 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.


The fonts added to your frontend template won't be loading on your backend. If you want them to load in your backend too, put them into the backend's template/theme as well:

Joomla: administrator|templates\[your template]\style.css
WordPress: wp-admin\css\wp-admin.min.css

In Joomla you might have some other css file in there, for example the default Joomla 3 backend's main css file is this: administrator\templates\isis\css\template.css

You could create a CSS file on your server 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, without having to modify your theme/template.
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.