How to change font across your website
On this page:
Editing and applying Global Text styles
Custom text styles
At the very foundation of all websites is a specific style.
Two major elements that make up this style and identity are text and colors. In this article, you will find out how to change the text and colors across your website in just a few clicks.
Editing and applying Global Text styles
The Editor contains a number of configurable text styles that you can add to any paragraph of text on your website, helping you maintain a consistent design.
By default, all text styles inherit the font family from the General text style. To apply a new font family to all text styles, change the font family of the General text located found in the Global Design > Global texts menu.
If you would like to customize the appearance of any other text styles, you are able to do so by selecting the text style from the menu. You can change attributes such as the font weight, size, color, alignment, link style and more.
Once you have established the title and paragraph text styles, you can easily apply them to any content added in Text modules. Simply highlight the content you would like to add a text style to and choose the specific style from the Design menu. If you would like to make quick adjustments to the Global text styles, you are able to select the edit icon next to the text style in the Design menu.
Styling text for different viewports
All title and paragraph text styles can be optimized for the three main viewports: desktop, tablet and mobile. For example, if you were to style the Light Spot Text style to be 70px on desktop, 50px on tablet, and 30px on mobile, you would begin by styling the Light Spot Text font size to 70px in the desktop viewport. Any changes made in the desktop viewport will affect the tablet and mobile.
Next, you would style the Light Spot Text font size to 50px for the tablet viewport (remember to click the tablet view in the Editor's top bar before editing the module). Any changes made in the tablet viewport will affect mobile but not desktop. Finally, you would style the Light Spot Text font size to 30px for the mobile viewport (remember to click the mobile view in the Editor's top bar before editing the module). Any changes in the mobile viewport would not have an impact on other viewports.
The viewport hierarchy "breaks" for rows, columns or modules once you modify one of the elements on one of the viewports individually. For example, when you modify the font size on tablet or mobile and afterwards change the font size in desktop, the changes on desktop will not affect the other viewports. This is to help you avoid overwriting viewport-specific modifications and design every time you change something on desktop or tablet.
Grey indicator dots next to styling options: When you see a grey indicator dot next to a style option, this means a style change has been made locally on that element. No grey indicator dot means the style is inheriting from the global style.
Click the grey indicator dot to reset the styling and revert to inheriting from the global style.Custom text styles
Apart from the default text styles in the Editor, you also have 10 custom styles in case you need to define additional ones.
This could, for example, be useful if you have an announcement banner on your website and want any text on that to appear with a unique style. Click one of the custom styles, style it any way you like, and give it a suitable name to help you recognize it later on.
Updated on: 26/06/2025
Thank you!