Use Self-Hosted Fonts For MetaSlider Captions

The Theme Editor feature in MetaSlider Pro allows you to choose different fonts to use for your slideshows.

By default, these custom fonts will be loaded from a Google website. If you don’t want to do this for privacy reasons, it is possible to host the fonts on your website.

Please note: If you choose “Default” for the “Font Family” setting, MetaSlider will never connect to an an external website. This guide is only relevant if you choose a custom font for the “Font Family” setting.

Option #1: Use a Plugin

There are plugins available to make it simpler to use self-hosted fonts. One plugin we’ve tested is TK Google Fonts.

• Install the “TK Google Fonts” plugin.
• Go to “Appearance”, then “TK Google Fonts”.
• Choose the font you want to use from the dropdown.
• Click the “Add Font” button.
• Your font is now hosted on your site and there is no connection to any Google site. Your MetaSlider slideshow will be able to use your chosen font.

Option #2: Manually Add Fonts to Your Site

This second option is for users who have some technical experience.

• The first step is find the name of the font you want to download.

• Go to https://fonts.google.com and search for the font you selected in MetaSlider. In this example we’re using the “Grandstander” font with “600” weight and “italic” style.

• From the available styles, select the one that matches the “Font Weight + Style” setting in MetaSlider. In this example, we select “600 + italic”.

• Click “View selected families” in the top-right of your screen to reveal the font embed settings.

• Select URL of the font hosted in Google and open in a new browser tab.

• You’ll see the CSS that loads and defines the Google font. Save each .woff file and upload to a directory on your website.

• In WordPress, go to Customize > Additional CSS and add the same CSS from previous step but replacing the URL of the woff files to point to the copy hosted in your site.
• That should complete the process of self-hosting the fonts and you can now test your MetaSlider slideshow.