Setting the proper font styles is crucial for the landing page.
However, this task can be tiresome when you have to individually set the font styling for each and every component of the page.
To solve this pain point, we have Global typography.
How to access Global Typography:
Click on the global settings on the top left corner of the screen.
The third option from the top is typography AKA Global Typography
How to set fonts styles in the Global typography:
Once you click the global typography, you will see quite a few predefined font selectors namely Heading H1, Heading H2, etc.
Each of these predefined font selectors is customisable and can be linked to the modules.
If you click on, say Heading H1, you will see the font settings of Heading H1.
Here you can set screen-specific font styles.
In other words, you can have one type of Heading H1 font style for desktops and totally a different style of Heading H1 font style for other screens.
For example, If you want to set INTER font for the desktop under the Heading H1 font selector, all you need to do is click the desktop icon and set the font style.
I have shown you how to do this through the video below.
We have so many preloaded fonts that you can use on your pages.
In this way, you can set font styles for all the predefined font selectors.
How to link a predefined font selector to a module:
Now, you may wonder, how to add these predefined styles to the modules of the page.
I will show you how you can do this in this section.
Once you link a particular font selector to a module, the font style within the font selector gets applied automatically to that module.
The linking process is mentioned below
To link a particular font selector to the modules, you have to go to the typography settings of that particular module and select the predefined font selector over there.
Let me show this process through an example. Let's take a text module as an example.
Please see the video below.
I will add the Heading H1 font selector to a text module in the video below.
This linking process is almost the same for all the other modules that we have within the builder.
How to Unlink a predefined font selector from a module:
If you wish to unlink a predefined font sector from a module, the process is quite easy.
This process too has to be done within the typography setting of that module.
The unlinking process is mentioned below
Let me show this process through an example. Let's again take a text module as an example.
Please see the video below.
I will unlink the Heading H1 font selector from the text module in the video below.
This unlinking process is almost the same for all the other modules that we have within the builder.
How does Global typography save you time?
When you make one change to a predefined font selector, say, Heading H1, that change will be reflected automatically on all the modules that are linked to the Heading H1.
Let me show this process through a quick video
Custom font selector:
If you want to create your own custom font selector, we have you covered.
The option to do that is at the bottom of the global typography settings.
Let me show you the option through the screenshot image below
You can create your own custom font selector and give it a name.
You can unlink and unlink the custom font selector in the same way mentioned above and inject the font styles into the modules.