Dynamic Typography Overview

Note: This feature requires GeneratePress 3.1.0. or above.

You can find the Dynamic Typography options in Customize > Typography.

Please refer to this article if you would like to switch your existing site to use the new system.

Font Manager

Once the Typography panel is open, you’ll see the Font Manager.

The Google fonts list will show by clicking the Search fonts field. You can select a font from the dropdown list or type in the font name to search.

Once the font is selected, you can select the variants available.

If the selected font is a Google font, the Google font option will be toggled automatically.

If this Google font is installed locally, make sure this option is untoggled.

To add a font installed locally, enter the font name directedly in the Font family name field.

Google font-display

There’re 5 options in the dropdown list of Google font-display, to understand each option please check Google font-display.

Typography Manager

The typography manager section lets you assign fonts and manage typography for the elements of your site.

Once the element is selected, you’ll see the typography options available.

Typography Options

Responsiveness

Set different typography values for different devices by clicking the desktop/tablet/mobile icon.

Font family

This option controls the font family from the font list created in the Font Manager.

Font weight

This option controls the thickness of the character outlines relative to their height.

Text transform

None – No change to the font

Capitalize – The first letter of every word will be a capital

Uppercase – All letters will be capitalized

Lowercase – All letters will be lowercase

Font Style

This option controls whether a font should be styled with a normal, italic, or oblique face from its font-family

Text Decoration

This option controls the appearance of decorative lines on text.

Font size

This option controls the size of the text.

Line height

This option controls the height of a line box.

Letter spacing

This option controls the horizontal spacing behavior between text characters.

Bottom margin

Some elements like body and headings have a bottom margin option which controls the spacing under the text.

Units

Units available: px, em, rem, % (for font size only). Please see this article for more info.