Textformats and Webfonts

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

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.

Here I created a Textformat named "Big":

Now I can use this Format in the texteditor. In case you already styled your text just select it and make sure it's unstyled by clicking the "Clear formatting" button.

The "Clear formatting" button.

Then select your format from the "Formats" dropdown:

Applying a textformat in the texteditor.

If you'd like additional settings for Tablets, go to "Textformats" and activate "Add Tablet settings to Textformats"

Enable Tablet settings here

Webfonts

Go to "Lay Options" → "Webfonts" and click "+Add Font".

The Webfonts screen

Add your webfonts by .woff/.woff2/.ttf file, or by <link> or <script> tag or Google Fonts import. Different web font providers will give you different options for including a font on a website and these options should cover all of them.

Any font can be converted to a .woff font, just google for example "ttf to woff converter". Woff is the saftest way to go and works even on older browsers.

Variable Fonts

Lay Theme currently supports Variable Fonts only if you upload one as a .ttf file in "Lay Options" → "Webfonts". Upload a variable font .ttf file in "Lay Options" → "Webfonts". Then create a Textformat that uses that font to view the variable font's sliders like here:

Bold and Italic fonts

In the Texteditor you have the B and I buttons for bold and italic. Usually, this only tells the browser: Make this font more fat or slanted. And for variable fonts, oftentimes this doesn't even work.

Bold and Italic buttons in the Texteditor

With textformats, if you use a normal font, you can set the bold or italic font family that will be used for the bold or italic styles.

This way, your website will display the real bold or italic font families instead of artificially generating them. If you use a variable font, the sliders will appear here and you can make the font more bold or slanted here.

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

If you have a big headline, the lower part of letters like g, j, p, q, y, etc. might get cut off.

To fix this, enable this setting in "Lay Options" → "Textformats":

Now you can add "Padding Bottom" to the textformat for the desktop, tablet and phone settings: