Web Font Selector

3 min read Updated

The Web Font Selector Addon adds a font drop-down to the WordPress visual editor. You can choose a Google Font, or a web safe font, for any part of your text. It works in the SiteOrigin Editor Widget and in the other classic (TinyMCE) visual editors on your site. It also adds the same font list to the Font Family control in SiteOrigin CSS.

View the Web Font Selector demo.

Requirements

Go to SiteOriginPremium Addons and activate Web Font Selector. This also activates SiteOrigin CSS and the SiteOrigin Editor Widget if they are installed.

Visual Editor

The font drop-down shows at the end of the first toolbar row in these editors:

  • The SiteOrigin Editor Widget, in Page Builder, a SiteOrigin Layout Block or a widget area.
  • Other SiteOrigin widgets that have a visual editor field, for example the text of an Accordion or Tabs panel.
  • The Visual tab of the Classic Editor.
  • The Classic block in the Block Editor.
  • The legacy Text widget in the classic Widgets screen.

To change the font of some text:

  1. Select the text. To set the font for new text, put the cursor where you will type.
  2. Click the font drop-down.
  3. Type part of the font name to search the list. The list has two groups, Web Safe and Google. Each font shows in its own typeface.
  4. Click the font.
  5. If the font has more than one variant, a Variant drop-down shows next to it. Choose the weight and style, for example 700 or italic. The addon starts with regular, or 400, when the font has it. Otherwise it starts with the first variant.

To remove the font, select the text and click the small x in the font drop-down.

The addon wraps the text in a span with the font, weight and style. On the front end, the addon finds these spans on the page and loads their Google Fonts from Google, in the visitor’s browser. Web safe fonts need no download. If a font doesn’t load, see Load the Fonts on Every Page below.

SiteOrigin CSS

In SiteOrigin CSS, go to AppearanceCustom CSS and open Visual Mode. Select an element in the preview. On the Text tab, the Font Family control is now a font drop-down with the same Web Safe and Google lists and a Variant drop-down. Without the addon, Font Family is a text field.

When you choose a Google Font, the plugin writes the font-family declaration and adds an @import rule for the font at the top of your CSS. When you change the font again, the plugin also removes fonts that no rule uses from the @import rule.

For more about Visual Mode, see Visual Editor.

Advanced Customizations

Load the Fonts on Every Page

The addon loads the fonts on the front end when the post content, or a widget in a widget area, has text with a web font. If a font doesn’t load, for example on a page built by a theme template, add this to your theme’s functions.php file or a code snippets plugin:

add_filter( 'siteorigin_premium_web_font_selector_frontend_force_load', '__return_true' );

Stop Loading the Fonts on the Front End

If you load the fonts in another way, for example from your own server, you can stop the addon from loading them from Google Fonts:

add_filter( 'siteorigin_premium_web_font_selector_import_fonts', '__return_false' );