In this article we will look at how you can define how the font on your website should change on mobile, tablet or desktop viewport. The text would for example have to be smaller when viewing the site on mobile versus bigger when viewing on desktop.
How to change a font for different viewports
- Change the viewport in the top right corner of the Editor to the one you wish to edit
- Double click on the text module that you want to define the font for
- A menu will appear in the top of the interface. In the top left corner you will see a dropdown menu with the different global font styles. The style used for the text module you just chose will have a tick mark next to it.
- Click the pencil icon to edit the font
- Change the values such as font size and colour
- Click the green tick mark to save your changes
- Repeat for the other viewports
We hope you found this mini-tutorial useful to define custom font sizes for each of the three viewports.