Textformats and Webfonts

Textformats are an easy way to create reusable text styles. And Webfonts are key for a unique look.

In the WordPress admin menu, click Text Formats to open the Text Formats screen.

Open Text Formats from the WordPress admin menu

Textformats

We recommend using Textformats for styling all of your texts. This way you have different font sizes across desktop, tablet and phone, and you ensure a consistent look.

Textformats are an easy way to create reusable text styles. After you created a textformat you can use it in the texteditor and in "Customize". When you update a textformat that you have applied to a text previously, the text's style will be updated accordingly.

Create or Duplicate a Format

Click Add Format to create a new Textformat. If you want to start from an existing style, click Duplicate on that format and adjust the copy. This is useful when you need a similar headline, paragraph or character style with only a few changes.

Create a blank Textformat or duplicate an existing one

Format Types and Tabs

Each format has a Format Type: Paragraph, Headline or Character. Paragraph and Headline formats apply to whole text blocks. Character formats apply to selected words inside a text block.

The format editor is split into tabs. Use General for font family, size, color, weight, line height, letter spacing, alignment, text wrap, variable font settings and desktop / tablet / phone values.

General controls the base typography and responsive values

Bold & Italic Tab

Use Bold & Italic to decide what happens when you use the b or i buttons in the texteditor. For normal fonts you can choose dedicated bold or italic font families. For variable fonts, the available axes appear here so bold and italic can use real variable-font values.

Bold & Italic controls the real font or variable font settings used by the texteditor buttons

Decoration Tab

Use Decoration for extra visual styling. Text Outline adds an outline width and color. It is easiest to judge on larger text without a text background.

Text Outline draws a border around the letters

Text Shadow adds offset, blur and color controls. You can combine it with Text Outline if the text should keep a crisp border while the shadow adds depth.

Text Shadow can be combined with Text Outline for a stronger effect

When the format type is Headline or Character, the Decoration tab also includes Underline and Background. Underline controls color, thickness, offset, style and skip-descenders. Background controls color, horizontal and vertical padding, rounded corners and vertical offset.

Headline and Character formats can have underline and background styling

Using Textformats

Your formats appear in the Formats dropdown when you edit texts in Projects and Pages. Open Paragraph, Headline or Character and choose the format you want to apply. Paragraph and Headline formats apply to the current text block. Character formats apply to the selected words.

Apply Textformats from the Formats dropdown in the texteditor

If text keeps old inline styling and the Textformat does not look right, select the text, click the Clear formatting button, then apply the Textformat again.

Clear formatting removes inline styling before applying a Textformat again

Using Textformats in the Customizer

You can also apply Textformats in the Customizer. This is useful for global interface text that appears across the website, like the site title, menu points, project thumbnail titles, search results or shop text.

For example, open Customize → Site Title → Site Title and choose a Text Format. The site title uses that Textformat, and if you later update the Textformat, the site title updates too.

Use Textformats in the Customizer for global website text like the Site Title

Webfonts

Go to Lay Options → Webfonts and click Add Font. The Webfonts screen lists all fonts that are available in Textformats, shows a test sentence for each font, and shows whether the font comes from Google or from an uploaded file.

Upload or import webfonts here, then use them in Textformats

You can add fonts by uploading files such as .woff, .woff2 or .ttf, or by using an import method from a font provider. Use Preload Font for important fonts that should be available as early as possible on the frontend.

Variable Fonts

A variable font is one font file with adjustable axes, for example weight, width, slant or italic. Upload the variable font in Lay Options → Webfonts, then select it as the font family in a Textformat.

When a selected font has variable axes, Lay Theme shows the matching sliders in the Textformat settings. Use the General tab for the default values of the format. Use the Bold & Italic tab when the texteditor's b or i buttons should switch to different axis values instead of a separate font file.

Fix descenders getting cut off (lower parts of g characters getting cut off)

Large type can sometimes sit so close to its line box that descenders get clipped. This is most visible on letters like g, j, p, q and y, especially in big headlines.

Open Settings on the Text Formats screen and enable Add Padding Bottom Settings. This adds an extra Padding Bottom field to your Textformats.

Enable Padding Bottom when descenders need more room

Then open the affected Textformat and increase Padding Bottom. Add just enough space so the lower parts of the letters are visible. If you use tablet or phone settings, adjust Tablet Padding Bottom and Phone Padding Bottom too.

Padding Bottom adds extra room below the text without changing the visible font size