Typography


Block Styles gives you several options when it comes to typography. Font customization, text alignment, height, and size are all interchangeable. Full Google font support and even the ability to embed your own font.

Font Family

Default

Step 1: Select the Default font tab

Step 2: Select the font you wish to use from the default drop-down menu.

The block you have selected will now render the font you have chosen.

Appearance

When using the Default font family, you will also be given the option to choose an appearance.

Select an appearance for your font if you do not wish to use the Default selection.

Theme & Web Safe Fonts

Appearance Theme & Web Safe Fonts

Using Google Fonts

To use the Google Fonts you’ve already setup, simply

Font Weight Google Font
Font Style Google Font

Custom Fonts

Step 1: To upload your own custom font, select the Custom tab under Typography.

Step 2: Click the link to add your custom font.

Adding custom fonts – https://blockstyles.com/docs/block-styles-settings/#3-toc-title

You will be taken to the Block Styles under Appearance to upload your custom font.

Custom Font Embedding

Font Weight Custom Font

Font Style Custom Font

Font Size

You can select a pre-set font size or select a custom font size.

Line Height

Scroll up/down or enter an input to customize your block’s line height.

Text Alignment

Select a text alignment for your WordPress block. The default selection is left alignment.

Letter Case

Customize your Letter Case between three selections. The default Letter Case is Ab.

Decoration

Allow your block text to feature underline, strikethrough, or overline appearance.

To revert any changes, click the X to return to the default selections.

Letter Spacing

Space the lettering out for each WordPress block by using the scale or inputting the amount.

Word Spacing

Along with letter spacing, you can space out words with the same scaleable settings.

Font Color

You can select a pre-defined font from the options menu or input your own custom font color.

Text Shadow

Text Shadow lets you customize X-offset, Y-offset, the blur radius, and blur color.

X-offset

Scroll or input an amount to set the X-offset. The default measurement is pixels, but you can also select REM, EM, %, VH, or VW.

Y-offset

Scroll or input an amount to set the Y-offset. The default measurement is pixels, but you can also select REM, EM, %, VH, or VW.

Blur Radius

Based on your X-offset & Y-offset settings, you can adjust the blur radius of your offset text.

Text Shadow Color

After customizing your blur radius, you can customize the color of the text-shadow.

To revert your text shadow changes, click the blue Clear button.

Text Stroke

Text Stoke gives you the ability to customize the text stroke of your block text.

Test Stroke Width

Use the scale or input an amount to customize your text stroke width.

Stroke Color

Customize the stroke color from our pre-defined selections or input your own custom color.

Click the blue Clear button to revert any Text Stroke changes.

Clear All

Click the red Clear All button to revert any typography changes made.


Interested in purchasing Block Styles? Click here to buy the plugin.

Purchase a membership to unlock all of our products!

  1. Block Styles
  2. Dynamic Content
  3. Styles Library
  4. Gesso Theme Support

If you experience any issues, feel free to reach us at our support page.


Leave a Reply

Your email address will not be published. Required fields are marked *