Hi Again,

Thanks for reaching out! .

Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

.toggle>.toggle-title a {
    font-family: Sofia-Pro;
    color: black !important;
}

Thanks

Hello Sam,

Great to have you back, and thanks for the positive updates.

Yes, you can do this. Since the Toggle element itself doesn't have a field for a custom CSS class, the correct way is to add a class to the parent Column that holds your "Toggle Panels" element.

Here is the process:

1. First, edit the WPBakery Column that contains your toggle panel

2. In the "Extra Class Name" field, add a unique name for that style. For example: sofia-pro-toggles

Now, you can update your CSS to be specific. Instead of the global rule, you would use this in your Salient > General Settings > CSS/Script Related > Custom CSS Code box:

/* Toggles with Sofia-Pro font */
.sofia-pro-toggles .toggle > .toggle-title a {
    font-family: Sofia-Pro;
    color: black !important;
}

When you want to create a separate toggle panel with a different font, you just repeat the process: add a different class name to that new column (e.g., georgia-toggles) and add a new, specific CSS rule for it:

/* Toggles with Georgia font */
.georgia-toggles .toggle > .toggle-title a {
    font-family: Georgia;
    color: blue !important;
}

This method allows you to create as many different toggle styles as you need.

Please give it a try and let us know how it goes.

Best regards,

Hi Sam,

Glad to help!

Should you have any further questions or need assistance along the way, please don’t hesitate to reach out.

Best regards,