Our typography component allows you to control the typography of your block.
At first, you’ll only see a couple of available options.
If you need more than the weight/transform, toggle the “Show Advanced Typography” option.
The Font Family dropdown serves a shortcut for the “Enter font name…” field. It has a small collection of popular fonts you can choose from.
If the list doesn’t have the font you wish to use, simply type it into the “Enter font name…” field.
Entering something into this field will make a “Google Font” toggle appear. If the font you’re entering is a Google Font, you can toggle this option and we’ll make the request to Google Fonts for you.
If it’s a Google font, you’ll have control over the variants you want to load. These variants will populate automatically depending on the font you chose. The fewer variants you need, the smaller the request size will be.
The font family fallback will also be populated automatically depending on the font you choose.
If you’re using a Google Font but hosting it locally, simply leave the “Google Font” toggle un-checked.
After the font family options, you’ll see options specific to your actual characters. These include font size, letter spacing and line height (excluding buttons).
These values have unit options when applicable.