Typography is a key component of your web project, and choosing the right styles will elevate the look and feel of your website.
In the following guide, we’ll cover four important typographical properties that you can configure. Defining these essential properties will add unique styles to your text:
We’ll also briefly review some best practices you can apply to any project.
If you wish to change your font, you can access the font dropdown menu within the Typography section of the Styles Panel.
After selecting an element, you can choose that element’s font by opening the dropdown menu. Simply click the font to apply it. This applies your chosen font to the element and all of its children.
Adding additional fonts
Though Webflow automatically includes a variety of fonts, you can import fonts of your choice from Google Fonts or Adobe Typekit. You may also upload custom fonts to your project, if you need more options.
Setting the default font site wide
Each project’s default font properties are assigned to the Body tag within your HTML. All body text elements throughout your website inherit these styles as they’re assigned. Thus, any typography changes you make will be applied across your entire website. This allows you to quickly update your text. Any specific typography values you’ve set elsewhere will not be affected, since these values take precedence over global defaults.
To set your default font:
Launch Navigator within the right sidebar (hotkey: F) or by using the navigation bar at the bottom of the canvas
Select Body from the list of elements
Open the Styles panel (hotkey: S)
From the Selector section near the top, click “Select a Class or Tag” and choose Body (All Pages)
Scroll to the Typography section within the Styles panel
Finally, choose your font from the dropdown menu
Webflow highlights property names orange when they inherit values from another places. Clicking these orange names displays the original locations of inherited values. When you override a value by changing it, that same property name will become blue.
Most fonts have multiple weights, such as light, regular, semi-bold, and bold. Changing font weights can be useful when you want to give text sections a distinct appearance. This is especially important for text blocks and headings.
After selecting a font, you can choose from its available weights using the dropdown menu just below. Font weights that aren’t available are greyed out.
Caution: If you select one of these greyed-out weights, browsers may generate weights of their own. As a result, your fonts may not render correctly.
Hovering over each font weight shows you a real-time preview prior to selecting it.
When configuring your typography, you can choose between two font styles: normal (default) or italic.
Caution: Not all fonts include an italicized style. If you select italics for one of these fonts, browsers will render their own forced, italicized versions. These may not render correctly.
Font color is a straightforward property that allows you to customize the color of your fonts. This can be applied to text snippets, text sections, and more.
You can set a font color by typing in by typing in a hex value, rgba value, or a color name. Within the Typography section, you may also use the Color Picker to preview and make a selection.
You aren’t obligated to configure each element’s typography manually. Using CSS classes, you can create styles and apply them to the elements of your choosing. This is especially useful for styling many elements of the same type. CSS also allows you to override global styles for specific elements, granting you more flexibility.
It may also be useful to adhere to a general style guide for your text elements. When using classes and common tags for paragraphs or headings, typographic styling becomes more efficient. What developer doesn’t want to save time and energy?
This also ensures your text elements will be consistent sitewide.