Google Fonts, Font Awesome & Custom CSS - Oxilab

Image Hover Effects Ultimate gives you powerful typographic and styling tools, including access to 650+ Google Fonts, Font Awesome icon support, and custom CSS. This guide explains how to enable and use each one effectively.

Google Fonts

What Is It?

Google Fonts is a free library of hundreds of web fonts you can use on your WordPress site. Image Hover Effects Ultimate integrates with Google Fonts so you can use any of 650+ fonts for the text in your hover effects.

How to Enable Google Fonts

Go to Image Hover Ultimate → Settings.
Set Google Font Support to Yes.
Click Save Changes.

Once enabled, a font picker appears in the typography settings of each hover effect. Search by name or browse to find your font.

Popular Google Fonts for Hover Effects

Roboto: Clean, modern, highly readable
Open Sans: Friendly and professional
Playfair Display: Elegant serif, great for photography and luxury brands
Montserrat: Bold and contemporary for headings
Lato: Light and versatile
Poppins: Geometric, modern, very popular

GDPR Consideration

When Google Font Support is enabled, font files are loaded from Google’s servers. This sends visitor IP addresses to Google, which may require disclosure under GDPR if you serve EU visitors. To avoid this, self-host your fonts locally and disable Google Font Support in the plugin settings.

Performance Tip

Each Google Font you use adds an extra HTTP request. Try to use the same font across all your hover effects rather than mixing many different ones. One or two font families is ideal for performance and visual consistency.

Font Awesome Icons

What Is It?

Font Awesome is a widely-used icon library. In Image Hover Effects Ultimate, Font Awesome icons are used in Button overlay effects, each button displays an icon that you choose from the Font Awesome library.

How to Enable Font Awesome

Go to Image Hover Ultimate → Settings.
Set Font Awesome Support to Yes.
Click Save Changes.

How to Use Icons in Hover Effects

When creating a Button overlay effect, you’ll see an icon field for each button. Enter the Font Awesome class for the icon you want. Examples:

fa fa-heart: Heart/like icon
fa fa-shopping-cart: Shopping cart
fa fa-search: Search/zoom
fa fa-link: Link/external
fa fa-download: Download
fab fa-linkedin: LinkedIn (brand icon)
fab fa-twitter: Twitter/X

Find the full icon list at fontawesome.com/icons.

Avoid Loading Font Awesome Twice

Many WordPress themes and other plugins (Elementor, WooCommerce, etc.) already load Font Awesome. Loading it twice can cause icon display issues or unnecessary page weight. To check:

View your page source (Ctrl+U in browser).
Search for “font-awesome”.
If it appears more than once, set Font Awesome Support to No in the plugin settings.

Custom CSS

What Is It?

Custom CSS lets you write your own styling rules to override or extend the default appearance of your hover effects. This is useful when you need a very specific visual result that isn’t achievable through the standard settings panel.

Where to Add Custom CSS

There are two recommended places to add custom CSS for your hover effects:

Option 1: WordPress Customizer (Recommended for most users)

Go to Appearance → Customize → Additional CSS.
Add your CSS rules there.
Click Publish.

Option 2: Per-Effect Custom CSS (Pro)

The Pro version includes a Custom CSS field inside each hover effect editor, letting you scope CSS to a specific shortcode without affecting others.

Using the Custom Parent Class

To target only Image Hover Effects with your CSS (and avoid accidentally affecting other elements), use the Custom Parent Class setting:

Go to Image Hover Ultimate → Settings.
Enter a class name in Custom Parent Class, e.g., my-hovers.
Save settings.
Now write CSS prefixed with that class: .my-hovers .oxi-image-hover { ... }

Common Custom CSS Examples

Change the font on all hover effect titles:

.oxi-image-hover .oxi-title {
    letter-spacing: 2px;
    text-transform: uppercase;
}

Add a bottom border to hover effect items:

.oxi-image-hover-main {
    border-bottom: 3px solid #ff6600;
}

Override border radius on images:

.oxi-image-hover img {
    border-radius: 50% !important;
}

Tips for Custom CSS

Use your browser’s Inspector tool (right-click → Inspect) to find the exact class names used by the plugin.
Use !important sparingly, only when the plugin’s default styles are overriding yours and you can’t avoid it.
Test CSS changes on a staging site before applying to production.