Using your own fonts

Can I use custom fonts in Smart Slider 3?

Sure can!

⚠️ General rule

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.

Not sure what's the name of your font? Consult the developer of your theme or plugin, which loads the font.

How do fonts work in Smart Slider 3?

Smart Slider 3 handles the fonts the same way the rest of your website does. If the font is already loading on your site all you need to do is to write it's name to the Font family field and it will be used.

☝️ Note: 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 the font name contains space (e.g. Open Sans) make sure you put quotes around it: "Open Sans".

Frontend

⚠️ Warning: If 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.

If you want to use a font file to load your own font, follow these steps:

1

In WordPress if you don't have a place where you put customized CSS codes, you can use a plugin like Simple CSS, which will create an option for you in the WP left admin menu's Appearance -> Simple CSS.

In Joomla, if you don't have a place where you put customized CSS codes, locate your template's CSS file, which you'll need to edit: templates\[your template]\style.css

2

Upload the font to your site using FTP and make sure you remember the location you uploaded the font.

3

Use the font-face CSS to define the new fonts:

@font-face{
    font-family: 'My font';
    src: url('http://www.example.com/font/myfont.otf');
}

The link at the src:url('') needs to be the link where you uploaded the font at step 2. E.g. if you're using WordPress and you uploaded it to your theme's folder, your URL will look like this: https://example.com/wp-content/themes/[your-theme-name]/myfont.otf

4

Save your edits.

☝️ Note: Do you want to be able to select your custom font from the font suggestion list? Go to the Global settings - Fonts and put it to the text area.

⚠️ Warning: 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.

💡 Tip: Check our video where you can see how this process looks like in action.

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.

Backend

The fonts added to your frontent won't be loading on your backend. If you want the fonts in your backend, too, follow these steps:

1: Create a new .css file.
2: Put the font face codes there to define the font. Similarly how it's described here
3: Upload the .css file to your site via FTP. Make sure you remember the place where you uploaded the font!
4: Go to the slider's Global Settings → Editor - additional CSS files and put the link of this CSS file there.

⚠️ Warning: 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.

💡 Tip: Check our video where you can see how this process looks like in action.

Troubleshooting

1

Font doesn't exists

If your font won't load for some reason, use Chrome to figure out the problem. Press F12 → click on Console then 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. For example, 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 call 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.

2

Font isn't loaded

If everything seems to be fine but the font still doesn't work, check if the font you're trying to use is actually loaded by your site. Remember, you must use the font with the name it was defined with.

First you should inspect the text where the font is not working using your Chrome browser. Simply right click on it and choose Inspect element. Locate the font-family CSS property and give it a fallback, like cursive or monospace.

To add a fallback, simply put a comma and then your fallback next to the original value.

Original	Fallback
`font-family: 'Raleway';`	`font-family: 'Raleway', monospace;`

If the font look changes, the font you're trying to use is not loaded by your site. Check the font name and make sure it's correct!

3

The font works somewhere else on the page, but not in the slider

Fonts must be used by the name they were defined with. So if the font you're trying to use works elsewhere that means it was defined with a different name than you're trying to use in the slider and that is why the browser can't render the font to the texts in Smart Slider.

To figure out what is the name of the font, you should inspect the text where the font is working and find the font family CSS property to see its value.

Example

If you're trying to use a font called Blantick Script it can make sense to write this to the font family field of your slider.

However, if the font was defined with a different name the browser will not render the Blantick Script font to this Smart Slider element.

To find out what's the name of your font, use your browser's developer tools and inspect a text where the custom font you want to use is working. You can use the search field to make it easier to find the font family definitions. Simply type font-family there, and only those CSS codes will be listed which contain the font-family property.

When you find the font family, check its value. Like in this case, the code is font-family: 'BlantickScript'; which means the Blantick Script family was defined with the name BlantickScript and this is what you need to use in the slider as well.