Why do global colors and fonts matter?
When we refer to a global color or global font, we’re talking about something we’ve made a preset on your website based on your branding. Consistent usage of these fonts and colors matters for a few reasons:
- If you want to build brand awareness and trust, you need to make consistent use of your branding as laid out in your brand guide. People will begin to recognize you by your colors and other branding only if they see them over and over again. Professional brands always follow their brand guides, so people learn to trust brands that show consistency in their branding.
- Using global fonts and colors can contribute to the performance of your website. This is because they are preset items that will be easier for WordPress to load than custom ones. (We’ll explain how to tell if you’re using a global color or font in more detail below.)
- Making changes across your entire site is much easier when you use global fonts and colors. If we change your global presets, those changes will be reflected across the website, but if you have used custom colors or fonts, even if they are the same as your presets, you will have to go in and change them one by one.
Global colors and fonts are also just easier to use. This is because they are saved and can be selected quickly, instead of having to enter a hex code (a format used to identify colors on a computer), select a custom color, or choose from a list of fonts. Your global colors and fonts will be set up in Elementor when we build your website so they will already be there when you go to make changes or additions to your site.
How to ensure you are using global colors and global fonts
Let’s use a heading on your website as an example. If you click on a heading in Elementor, there will be an Edit Heading sidebar that will show you a number of options, all organized under three tabs: Content, Style, and Advanced. Your colors and fonts can be found under Style. You’ll be looking at Text Color and Typography.
Your header text color will show up in a little box on the far right, while there will be a pen icon that represents the font used for the heading. Right next to this box and this pen icon, to the left, there is another icon that looks like a sphere or globe. This is the global setting icon, and if it displays as a bright purple color, you know that the color or font is a global preset. If the icon is not a bright purple, you can hover over it to see that it is Custom.
Note: We almost always use global colors and fonts for the reasons explained above, but there will occasionally be a case where we don’t do this. However, we recommend that you always use global fonts and colors when you are making changes or additions to your site.
If you want to change how the heading appears on your website, you can click on the purple globe icon and choose a different global preset for that text. This will keep your changes within your brand guidelines and make it easy to change them again later.
🚨 Caution: If you select the box or icon to the far right and set your color or font to one of your branding items manually, it will not show up as a global preset. You’ll know you have done this if the globe icon isn’t purple any longer. If this happens, just click on the globe and select your color or font from the menu and that globe icon will turn purple again, letting you know that you are utilizing a global color or font.