A big part of creating a unique look for your business and a strong brand presence is creating your own font system. Fonts are often overlooked with branding but they can be one of the most important parts of making a good impression.
Your font system is the typefaces you choose to use throughout your brand and all branded elements. Along with your colour palette, these need to stay consistent to make sure your brand is always cohesive and fitting with your business.
Our House Font Systems
With every Snug theme, you get a hand-selected variety of house font systems. These are crafted to perfectly match with the themes so if you’re looking for something you know will work, they are there for you!
The house Colour Palettes are below and can be found by going to Appearance > Customizer > Fonts:
If you prefer to use your own brand font system, (which we recommend you do!) you can use the instructions below to create a perfect palette to fit the themes!
What Makes a Good Font System
Works with your brand – Having a good, on-brand font system can be the difference between your branded elements looking off-key and not quite right and them pushing your brand identity to the next level and making your brand recognisable from all angles.
Less is more – You should only ever have between 1 and 3 fonts in your system and they should all work together
Create a hierarchy – The fonts you need for your system are a Main Heading, Subheading and Paragraph font. You need to make sure the Main heading stand out the most, the Subheading needs the next attention and then the paragraph will be the last part your eye is drawn to.
Readability – Of course, the main purpose of our type is to make sure it is easy to read for everyone. Otherwise, what is the point of using it because no one will be able to tell what you do! With every font that you find or consider using, try it out in a few different sentence structure and paragraphs to make sure it is easily digestible in any format.
Creating a Custom Font System
The Snug themes use Google Fonts to embed custom fonts to the design. Head there to start searching for your perfect brand font system!
Here are a few things you need to keep in mind when you’re looking out for your brand fonts:
Contrast: With each font element, you want a little contrast so they don’t all blend into each other. Whether you create contrast with sizing, font weights or spacing, you need to differentiate between each one to make sure they look different enough for your system.
Use them again: In a similar way, using different weights and spacing sometimes means you can utilise the same fonts in your system but in a different way. For example, you could use the same font for your heading and subheading but have the heading bold and the subheading light and with more spacing.
Stay on Brand: The key is to always make sure the fonts you use fit your brand. Whatever you do, keep referring back to your brand sweet spot and research to see if the fonts match up with what you found.
Use Your Eye: A bit of a design eye is required here. If things don’t look right, switch them up and try something else. As with the logo designs, feel free to try lots of different options and go with the one that feels best.
Adding Your Font System to Your Theme
Once you’ve chosen your fonts from Google Fonts, head to Appearance > Customizer > Fonts to update the theme choices.
In Google Fonts, find the font you want to use and click the + icon next to that font. You can select up to three fonts so you have one for the main headings, one for the subheadings and one for the paragraphs (you can use the same one twice!).
Once you have selected your fonts, click on the box at the bottom of your screen to open up a screen where you can find the Embed code as highlighted below:
You need to copy this code and paste it into the Google Fonts Code field. Then, you need to copy the font-family code for the font you have selected and paste it into the relevant field.
So for example, you need to copy all of this code highlighted below:
And I want to use this for the main headings on the website, so I would paste this into the Main heading font field like this:
If it has worked correctly, you should see your font in action on the right-hand side of the screen in the Customizer!
Downloading Your Fonts to Use For Your Brand
Once you’ve uploaded your brand fonts to your website, you may want to download the fonts to your computer for use on other branded elements such as social media graphics, business cards and branded documents.
Go back into Google Fonts and find the window where you copied the embed code and font family from. In the top right corner, there is an arrow with a line underneath. If you click this, you can download the fonts locally so they are on your computer!
Pin this post!
