How to Use Custom Fonts in Slider Revolution

Adding custom fonts to Slider Revolution allows you to elevate your designs, ensuring your sliders perfectly match your brand's unique aesthetic and improve overall visual consistency.

Why Custom Fonts Matter in Slider Revolution

Custom fonts help your sliders stand out, reinforce brand identity, and provide a more polished and professional appearance. They give you complete creative control over your typography, moving beyond the standard web-safe fonts or those provided by Google Fonts alone.

Step-by-Step Guide to Adding Custom Fonts

Implementing custom fonts in Slider Revolution involves a few key steps, from preparing your font files to applying them within your slider designs.

1. Prepare Your Font Files

Before uploading, ensure your custom font is available in various web-friendly formats to maximize browser compatibility.

Recommended Formats:
- WOFF (Web Open Font Format): Excellent compression and wide browser support.
- WOFF2: Even better compression than WOFF, supported by modern browsers.
- TTF (TrueType Font) / OTF (OpenType Font): Widely supported, but often larger file sizes.
- EOT (Embedded OpenType): Primarily for older Internet Explorer versions.
- SVG (Scalable Vector Graphics): For older iOS versions.
Converting Fonts: If you only have one format (e.g., TTF), you can use online converters like Font Squirrel's Webfont Generator to generate all necessary formats and the corresponding @font-face CSS.

Here's a quick reference for common font formats and their general browser support:

Font Format	Best For	Browser Support
WOFF2	Latest browsers, smallest file size	Chrome, Firefox, Edge, Safari, Opera
WOFF	Good balance of support and file size	All modern browsers, IE9+
TTF/OTF	Broad support, larger file size	All modern browsers, IE9+
EOT	Older Internet Explorer versions	IE6-IE11
SVG	Older iOS Safari (now largely obsolete)	iOS 4.1-5.0

2. Upload Font Files and Create CSS

Next, you'll upload your font files to your website and create a CSS file that tells browsers how to use them.

Create a webfonts Folder: It's best practice to create a dedicated folder within your WordPress theme's directory (e.g., wp-content/themes/your-theme-name/webfonts/) or your main site directory to store all your font files. Upload all your .woff, .woff2, .ttf, etc., files into this folder.
Create a custom-font.css File: In the same directory (or a css subfolder), create a new CSS file (e.g., custom-font.css). This file will contain your @font-face rules.

Add @font-face Rules: For each font family and weight, you'll need an @font-face declaration in your custom-font.css file. This tells the browser where to find the font files and what name to associate with them.

@font-face {
    font-family: 'My Custom Font'; /* The name you'll use in Slider Revolution */
    src: url('/wp-content/themes/your-theme-name/webfonts/mycustomfont-regular.woff2') format('woff2'),
         url('/wp-content/themes/your-theme-name/webfonts/mycustomfont-regular.woff') format('woff');
    font-weight: 400; /* Regular weight */
    font-style: normal;
    font-display: swap; /* Improves performance by showing fallback text first */
}

@font-face {
    font-family: 'My Custom Font'; /* Same family name */
    src: url('/wp-content/themes/your-theme-name/webfonts/mycustomfont-bold.woff2') format('woff2'),
         url('/wp-content/themes/your-theme-name/webfonts/mycustomfont-bold.woff') format('woff');
    font-weight: 700; /* Bold weight */
    font-style: normal;
    font-display: swap;
}

Remember to replace the url() paths with the actual paths to your font files and adjust font-family, font-weight, and font-style as needed.

3. Add Custom Fonts in Slider Revolution Global Settings

This is where you integrate your prepared fonts into Slider Revolution's interface.

Navigate to Global Settings: From your WordPress dashboard, go to Slider Revolution > Globals.
Locate Font Settings: Scroll down to find the "Font Settings" section.
Add New Font Entries: Here, you'll see options to add new font entries. Click the "Add Custom Font" button to create a new entry for each additional font family you wish to include.
Fill in Font Details: For each entry, provide the following:
- Font Handle: A unique, lowercase identifier for your font (e.g., my-custom-font). This is for Slider Revolution's internal use.
- Font Family: The exact font-family name you defined in your @font-face CSS (e.g., My Custom Font). This must match precisely.
- CSS URL: The direct URL to your custom-font.css file (e.g., https://yourdomain.com/wp-content/themes/your-theme-name/custom-font.css). If you've defined the @font-face blocks for all your desired font families within one "custom-font.css" file, you can use the same CSS URL for each font family entry. This allows Slider Revolution to load all necessary font styles efficiently.
Save Settings: After adding all your custom font families and their respective details, click Save Global Settings at the bottom of the page.

4. Apply Custom Fonts to Slider Layers

Once integrated into the Global Settings, your custom fonts will be available for use within your sliders.

Open Slider Editor: Go to Slider Revolution > Slider Revolution and open the slider you wish to edit.
Select Layer: Click on the text layer where you want to apply the custom font.
Navigate to Style Tab: In the right-hand sidebar, go to the Style tab.
Select Custom Font: Under the "Font Family" dropdown, you will now see your custom font listed alongside the default and Google Fonts. Select your desired custom font.
Save Slider: Don't forget to Save your slider to apply the changes.

Best Practices for Using Custom Fonts

Performance Optimization: Use only the font weights and styles you need. Larger font files can slow down your slider and website. Consider subsetting fonts if you only use specific characters.
Font Fallbacks: Always define a fallback font in your CSS (e.g., font-family: 'My Custom Font', sans-serif;) so that if your custom font fails to load, a generic, readable font is displayed instead.
Testing: Test your custom fonts across different browsers and devices to ensure they display correctly and consistently.

By following these steps, you can seamlessly integrate and utilize custom fonts in your Slider Revolution projects, enhancing your designs with unique and branded typography.