Web Font Selector

If you’d like to select fonts independently from theme settings, the Web Font Selector is a perfect addition to your content creation and editing process. The SiteOrigin Premium Web Font Selector lets you choose from over 900 beautiful Google Web Fonts, right inside the SiteOrigin Editor widget or any instance of the TinyMCE editor. For content you haven’t yet written, the font family can be selected before typing. Alternatively, for existing content, simply highlight the text and then select the font of your choice.

Requirements

To make use of this addon, go to SiteOriginPremium Addons, locate Web Font Selector and click the Activate button.

The SiteOrigin Premium Web Font Selector is added to any instance of the TinyMCE editor. Below is a small sample of the plugins, widgets, and locations you’ll find the TinyMCE editor:

  • SiteOrigin Widgets Bundle:
    • SiteOrigin Editor widget
    • SiteOrigin Accordion widget
    • SiteOrigin Contact Form widget
    • SiteOrigin Features widget
    • SiteOrigin Google Maps widget
    • SiteOrigin Hero widget
    • SiteOrigin Tabs widget
    • SiteOrigin Testimonial widget
  • Other Plugins:
  • WordPress Core:
    • The default Classic Editor Visual tab
    • The Block Editor (Gutenberg) Classic block

View the demo.

SiteOrigin Editor Widget

With the Web Font Selector addon activated, go to the page you’d like to work on and insert a SiteOrigin Editor widget into either Page Builder or a SiteOrigin Layout Block.

The Web Font Selector is located on the top row of the TinyMCE editor, next to the Toggle Toolbar button. If you’re editing a newly inserted widget, click the Select Web Font drop-down button and select the font family you’d like to use before you start typing. Alternatively, for widgets with existing content, highlight the text you’d like to change and then click the Select Web Font drop-down button to select the font family you’d like to use. Once a font has been selected, the available variants like regular and bold will be displayed in a separate drop-down menu next to the font drop-down.

The Select Web Font drop-down offers a wide range of Google hosted fonts.

SiteOrigin CSS Web Font Selector

SiteOrigin CSS is our advanced CSS editor plugin. If you’re new to SiteOrigin CSS, please, see the plugin’s page here. The visual editor in SiteOrigin CSS allows you to click on elements in your website and adjust their style values. The Web Font Selector replaces the standard font-family field with a drop-down selection of Google Fonts. Once a font has been selected, the available variants like regular and bold will be displayed in a separate drop-down menu below the font drop-down.

Standard Font Family Field

The regular font-family field.

Siteorigin Premium Web Font Selector Field

SiteOrigin Premium Google Font selector

WordPress Classic Editors

The SiteOrigin Premium Web Font Selector is added to any instance of the TinyMCE editor, this includes both the Visual tab in the Classic Editor and the Visual editing mode of the Classic block in the Block Editor (Gutenberg).

The Web Font Selector is located on the top row of the TinyMCE editor, next to the Toggle Toolbar button. If you’re editing a newly inserted widget, click the Select Web Font drop-down button and select the font family you’d like to use before you start typing. Alternatively, for widgets with existing content, highlight the text you’d like to change and then click the Select Web Font drop-down button to select the font family you’d like to use. Once a font has been selected, the available variants like regular and bold will be displayed in a separate drop-down menu next to the font drop-down.