Apply a Font to Any CSS Selector in WordPress with Font Hero

Some elements on your site have no font setting at all. A contact form shortcode, for example, prints its own labels and gives you nothing to style them with. Font Hero lets you apply a font to any CSS selector from the font face settings. You type in a tag or a class and the font is applied on save, with no custom CSS to write and no extra plugin.

The problem: a form label with no font option

In the video we have a page with a headline, a sub headline and a contact form added with a shortcode. The headline and sub headline use Font Hero fonts, but the form labels (Your name, Your email, Subject, Your message (optional)) are left in the default font. The form has no option to change that. We want the labels to use the same font family as the sub headline.

Find the selector and add it to the font

Before you can target the element, you need to know what it is. Your browser's inspector will show you.

1. On the front end, right-click a form label and inspect it. In our form it is a label element.
2. In WordPress, go to Tools → Font Hero.
3. Find the family you want to use (here, Subheadline) and click Edit on its font face (weight 400).
4. In Enter selectors comma separated, type the selector. Here that is label.
5. Save, then reload the front end.

The form labels now use the sub headline font. Any element you can select with CSS can be targeted this way, even if no builder, theme or plugin setting covers it.

Classes, multiple selectors and the preview

The field takes the same syntax as a CSS selector:

• Tags go in as they are: label, h1.
• Classes need a leading dot, the same as in CSS: .label.
• Multiple selectors are separated by commas. The hint under the field reminds you: Selectors example (h1, h1 bold, h1 italic, .large-title).

Below the field, Selectors preview shows the CSS rule Font Hero will generate for your selectors, including the font weight, so you can check it before you save.

Get Font Hero → dplugins.com