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.
"Open Sans"
.
In this article
- Frontend (learn how to load your custom fonts at the frontend)
- Backend (learn how to load your custom fonts at the backend)
- Troubleshooting (learn how to troubleshoot your font related problems)
Frontend
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.
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.
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 theBlantick Script
family was defined with the name BlantickScript and this is what you need to use in the slider as well.