Using your own fonts
How do fonts work in Smart Slider 3?
The list of fonts you see are only suggestions coming from the Global Settings, but you can use any font family name on your sliders.
Google fonts are automatically recognized, just simply write down the font family name.
But make sure, that at the global font settings, you are loading the font weights you would like to use.
Using a custom font that is already loading on your site
Step 1 - figure out the font-family name
On your website right click on the text which has the font you would like to copy → choose Inspect → check on the Computed tab what font-family CSS code is being used on that text:
Step 2 - use the same name in Smart Slider
Just simply write down the same exact name within our system too.
Usually custom fonts are only called in on the frontend of the website. So publish your slider to see the result!
If you would like to load the same font into the backend of your website too, follow this documentation.
Using a completely new custom font, which isn't loading on your website yet
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)
Upload the font file to your FTP. In your browser, check the link to the file to ensure your url is correct:
Make sure you have a place, where custom CSS codes can be written. If you do not have one yet, then:
- In WordPress, use a plugin like Simple Custom CSS and JS:
WordPress left admin menu → Custom CSS & JS → Add Custom CSS
- In Joomla, use an extension like Custom CSS:
Joomla 4 left admin menu → Content → Site Modules → New → HD-CustomCSSJoomla 3 top admin menu → Extensions → Modules → New → HD-CustomCSS
Create a custom CSS code, using font-face to define your font's details:
font-family: 'My font';
Use the same font-family name within Smart Slider, what you used in your code:
That's it! Publish your slider, and you will see that font being used on your text.
The fonts added to your frontend won't be loading on your backend. If you want the fonts in your backend, too, follow these steps:
Create a new .css file. Call it for example: smartslider.css
Write your font-face CSS code in it.
Upload the .css file to your website's FTP. In your browser, check the link to the CSS file to ensure your url is correct:
Go to the slider's Global Settings → Editor - additional CSS files and put the link of this CSS file there.
And that's it! Your CSS file and the defined font in it will load into the admin area of Smart Slider.
From our end there is nothing you have to do, just write the font's name into the Family field, 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. Go to the page with the problem → press F12 → click on Console → refresh the page. 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.
Ctrl + F5 to make sure your browser's cache doesn't load the previous file.