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

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

Frontend

Step 1

Upload the font file to your FTP. In your browser, check the link to the file to ensure your url is correct:

https://yourwebsite.com/xyfont.otf

Step 2

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-CustomCSS
  Joomla 3 top admin menu → Extensions → Modules → New → HD-CustomCSS

Step 3

Create a custom CSS code, using font-face to define your font's details:

@font-face{
    font-family: 'My font';
    src: url('https://yourwebsite.com/xyfont.otf');
}

Step 4

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.

Backend

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:

Step 1

Create a new .css file. Call it for example: smartslider.css

Step 2

Write your font-face CSS code in it.

Step 3

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:

https://yourwebsite.com/smartslider.css

Step 4

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.

Other methods

There are services, like Typekit, which offers their fonts to be loaded with JavaScript. These services require their own specific codes, so look around in their documentations to figure out how their fonts can be loaded. 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 the font's name into the Family field, and if the font is loading in your website, our slider will use it.

Troubleshooting

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.

Press Ctrl + F5 to make sure your browser's cache doesn't load the previous file.