Global settings, colours and fonts in the Vareons editor
Global settings in the Vareons editor control what applies across the whole site: text and heading styles, buttons, and fields, plus brand colours, site background, and Arabic and English fonts, and every component that inherits them follows them.
Last verified: 2026-09-18
Global settings live in the left sidebar of the editor under the General Settings tab and are split into three cards: Text & Headings, Buttons, and Fields. Next to it, the Design tab handles colours and fonts.
Text & Headings: these are set by role, not per component. The roles are Kicker, Heading H1, Heading H2, Heading H3, Body, Button, and Caption. Each role can have its size and line height set on three screens separately — mobile, tablet and desktop — with suggestion buttons that propose a value for each screen. Text alignment can also be set per language (Arabic and English), along with text colour, text background colour, font, bold, and italic. Ready-made size presets are available: Compact, Comfortable, and Large.
Global buttons: these set button appearance site-wide, including background colour, text colour, border colour, padding X and Y, and corner radius, which can be chosen from presets (None, Subtle, Medium, Large, Pill) or set to a specific number.
Global fields: these set form field appearance, including background colour, border colour, text colour, placeholder colour, and corner radius with the same presets or a specific number.
The Design tab sets the brand colours — primary, secondary, and accent — plus the site background. These colours are used in the site header, footer, buttons, and highlighted elements. The tab also sets the Arabic and English fonts, choosing from Google Fonts or entering a custom font URL, and fonts load with the first paint to reduce showing text in a fallback font.
The key idea is inheritance: every component inherits these global settings by default, and a component can override them with its own values from the right sidebar when needed, with a badge showing whether a field is Global or Custom. This means changing one text size in General Settings applies across the whole site, while sections the merchant customised stay as they are.
An important note: after saving General Settings the changes apply to the live site immediately, and General Settings and Design each have their own save button separate from the Save Changes button used for components and pages.
Setup steps in Vareons
Open the General Settings tab
From the editor's left sidebar choose the General Settings tab. You will find the Text & Headings, Buttons, and Fields cards.
Set text and headings
Open the Text & Headings card, then choose the role (Kicker, H1, H2, H3, Body, Button, Caption). Set size and line height for mobile, tablet and desktop, alignment for Arabic and English, and the text colour, font, bold and italic. You can start from a preset: Compact, Comfortable or Large.
Set global buttons
Open the Buttons card and set background, text and border colours plus padding X and Y, then choose the corner radius from the presets or a specific number.
Set global fields
Open the Fields card and set background, border, text and placeholder colours, then choose the corner radius for fields.
Set colours and fonts from Design
From the Design tab set the primary, secondary and accent colours and the site background, then choose the Arabic and English fonts from Google Fonts or a custom URL.
Save General Settings and Design
Click Save General Settings, then Save Design. Changes apply to the live site after saving, and each tab has its own save button separate from Save Changes.
Frequently asked questions
What do the global settings control?
Three things site-wide: text and headings by role, buttons, and fields. Colours and fonts are set from the Design tab.
Which text roles are available?
Seven roles: Kicker, Heading H1, Heading H2, Heading H3, Body, Button, and Caption.
Can a different size be set per screen?
Yes. Each text role has separate size and line-height values for mobile, tablet and desktop, with size suggestion buttons. Alignment can be set per language.
How do I set the site fonts?
From the Design tab choose the Arabic and English fonts from Google Fonts or enter a custom font URL, and fonts load with the first paint.
Must every component follow the global settings?
Components inherit the global settings by default, and a component can override them with its own values from the right sidebar, with a badge showing whether a field is Global or Custom.
Troubleshooting
1) If a text does not change after editing global settings, confirm you clicked Save General Settings and that the component has not overridden it with a custom value. 2) If the font does not change, check the chosen source (Google Fonts or a custom URL) and that the URL is valid. 3) If layout differs between screens, review the sizes for mobile, tablet and desktop. 4) Note that General Settings and Design are not saved by the Save Changes button.