Font family is one of the important factors that decide the aesthetic feel of your website. Many WordPress themes offer thousands of Google fonts as well as providing option to use system stack or custom style. In addition to using site wide font family, you may be interested in decorating only few text elements on your page. Perhaps, you want to change the color to highlight or add drop cap to show the first letter bigger. In this article, we will explain how to change these typographical settings for Gutenberg blocks in your WordPress site.
Gutenberg Blocks
There are two ways to adjust the typography settings of individual blocks in WordPress:
- Using default Gutenberg settings of text-based blocks.
- With the help of a block-based plugin.
If you are still using Classic Editor or using custom post type that does not support Gutenberg (like WooCommerce product pages), then the default settings will be different as explained at the end of this article.
1. Typography Settings for Gutenberg Blocks
Let’s say, you want to customize a paragraph in your content something like below. I have applied drop cap, semi-bold with italic, increased the letter spacing, highlighted few words with red color, capitalized first letter of each word and use larger font size. You can customize all these stuffs for any paragraph block within Gutenberg editor.
Go to the post or page where you want to change the typography settings and click on the paragraph block. On the right sidebar, go to “Block” tab where you can find the options for changing colors, typography settings and advanced section.
Changing Font Size
By default, Gutenberg editor will show a table to choose your font sizes from small, medium, large and extra-large options. Many WordPress users overlook it and think that’s all the settings available there.
Click the “Set Custom Size” icon showing just above the XL option. This will show a box as well as slider to set the custom font size for your paragraph. You can change the CSS unit as px, em or em by clicking on the px unit showing in the box.
View Hidden Typography Settings
Click on the three vertical dots (called “Typography options”) showing at the right end of “Typography” heading. This will show you all the hidden settings for customizing the appearance of your text.
Click the “Reset” link showing against “Font size” to change the text size to default (as per your theme). Click on all options under “Tools” section one by one to enable them.
Click anywhere outside to close the typography settings pop-up and you will see all selected options are showing visibly.
Changing Font Appearance
If you notice the block’s top toolbar, it has options for bold and italic. You can also click on the small down arrow (called “More”) and use additional options like highlight, strikethrough, superscript, subscript, etc. However, you can’t set lighter, semi-bold italic or black italic from the block’s toolbar. Simply, click the dropdown below “Appearance” option in the right sidebar and select the font style you need.
Adjusting Other Settings
Like appearance, you can set the followings:
- Letter Spacing – type the number to increase or decrease the space between the letters in the selected paragraph block. You can use the values like 0.5, 1 or 1.5 and check the live changes.
- Decoration – select from None, Underline or Strikethrough options.
- Letter Case – select from none, uppercase, lowercase or capitalize options to change the letter case.
- Drop cap – finally, turn on this button to show large first letter. This is idea for the starting paragraph in your articles.
Note: After customizing the paragraph, you can any time click the “Reset all” link to remove all your customizations.
Changing Text Color
There are two ways you can add colors to your block:
- Text and Background colors – click the “Text” or “Background” option showing below the “Color” heading in right sidebar. This will open the color palette showing your theme’s default colors. If you do not want to use theme’s color, click the box showing above the color palette to open a color picker.
When you pick a color, the box will show preview and corresponding color code. The paragraph block also will instantly change to the selected text color. By default, WordPress will show Hex color code. Click on the Hex dropdown and change to RGB or HSL if required. These options will show additional sliders to adjust the color combination.
Similarly, you can apply your preferred background color for the paragraph. If you want to remove the colors, click the “Color Options” (three vertical dots at the end of “Color” heading) and select “Reset” option.
As you can see in the above screenshot, text color will change the entire paragraph text’s color. If you want to highlight only few words in a paragraph, then select the words and click on the small arrow in block’s toolbar. Select “Highlight” option to view the color picker. From here, you can set the colors for text and background to only highlight the selected words inside the paragraph block.
Using Advanced Sidebar Settings
Under “Advanced” section, you can add custom CSS classes and define the styles under “Appearance > Customize > Additional CSS” section. Though this more technical in nature, you can apply the styles to multiple blocks on the same page. Learn more on how to add CSS in single page in WordPress.
2. Using Block Plugins
If the typography options available in default Gutenberg editor is not sufficient, then you can go for a third-party block plugin. For example, GenerateBlocks plugin allows you to change font family for the block which is not possible with Gutenberg.
You can also try other plugins like Spectra which offers similar typography block settings for headings (not for paragraph).
3. Typography Options for Classic Editor
If you are still using the old Classic Editor or custom post types like WooCommerce, then the options are limited. You can change the font color, bold, italic and strikethrough the text with the default TinyMCE editor. For additional features, you may need to switch to “Text” mode and add inline CSS styles to individual elements.
Final Words
Though Gutenberg was released years back, many users still do not aware of the features like block’s typography settings. I hope this article helped you to understand the default options and alternatives with plugins. Now onwards, you can easily customize the appearance of individual text blocks without relying on your theme’s stylesheet.
Leave a Reply
Your email is safe with us.