How to define fonts for different viewports

Did you know that you can define Global Design settings for each viewport?
Take Global Text for example. The font size for a specific global text (such as heading or spot text) would have to be smaller when viewing the site on mobile and bigger when viewing on desktop. A 70px header could look great on desktop, but much too big on mobile.

The Mono Editor comes with an editing space for each viewport. When changing a global setting in a particular viewport mode, this setting is applied only to that viewport.


How to change a Global Text for different viewports:

  1. Choose the viewport you wish to edit in the top right corner of the Editor
  2. Double click on the text module and highlight the text that you want to define the font for
  3. 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.
  4. Now you can either click the pencil icon to edit the font OR you can find the font under Global Design > Global texts and edit it there. Both ways will work.
  5. Change the values such as font size and colour
  6. Click the green tick mark to save your changes
  7. Repeat for the other viewports and Global Texts

Mono Templates are of course already optimised for all viewports. Being able to edit exactly how your design should adjust for different viewports - not just locally but also on a global level - gives you maximum creative control.

That's it ☺️


We hope you found this mini-tutorial useful to define custom font sizes for each of the three viewports. 

Was this article helpful?
0 out of 0 found this helpful