Demo – Documentation – GitHub
Add Typography to your Gutenberg site using Google Fonts. Enter CSS selectors or select Blocks to apply custom typography.
Typography style
Available typography options include:
- Font family & variants from Google Fonts
- Color (hex or rgba)
- Font size
- Line height
- Font weight
- Font style (italic, normal, oblique)
- Letter spacing
- Text transform (capitalize, uppercase, lowercase)
- Text decoration (line-through, overline, underline)
Typography context
Typographies can be assigned to a specific context:
- All site
- Post types/s (post types available on the site)
- Post types/s template (index, single)
- Front page
- 404 page
Typography selectors
Each typography can have several groups of selectors with unique modifications based on the root typography. For example: a typography can be set with a certain Font, Color and Font size; each of its groups of selectors inherit those properties and one could modify the inherited color and other the inherited Font size.
Available CSS selectors include:
- Text CSS selector (eg: .site-title a)
- Block Selector (eg: Block Quote > Citation)
Usage
The plugin can be accesed from the Customizer inside the tab The Typography. It can also be accesed from any Block editor’s The Typography sidebar (top right corner of the editor). Create a typography and assign it some options; create a group of selectors and inside it create some CSS or Block selectors. That’s it! If you want to preview the different fonts before selecting one you can preview them in the Google Fonts repository. Note: The typography editing is assigned to the ‘edit_theme_options’ capability. This means that, by default, only admin and super admin will be able to use the features.