Select Your Website's Fonts
Choosing fonts for your website is an important design decision that can have a significant impact on the overall user experience and the effectiveness of your website.
In this guide, we'll cover the following topics. Click on anyone to jump ahead.
Change Font Pack
With Nucleus Web you pick your fonts once! Then when creating pages, you pull from the preselected fonts you chose! That's why we recommend setting your Header, Colors, and Fonts as one of the first things you do in Nucleus Web. To choose your fonts head to Web, then Design, then click Fonts on the left-hand side.
To get started with Fonts in Nucleus Web we recommend choosing a Font pack. These are seven font pairings that we think look and work well together. Don't worry, all these can be changed and adjusted later!
To choose a Font pack you'll want to click the Change Font Pack button on the right hand side.
You'll be presented with seven different options as well as a brief description of the font pack:
Feel free to select a font pack you like. Again these can be adjusted or changed if you want in the future! Once you like a pairing, click on the pairing, then confirm the selection by clicking Yes, Change Font Pack.
Note: Some of the font packs contain one font, while some contain two. Just make sure you're happy with your selection.
Basic Edits
For those of you who are happy with one of the font packs we provide, then great! You are all done here and can move on, but for those that want to keep with their brand guide, or want to select their own fonts, then keep reading 🙂
We provide you access to all of the Google fonts to choose from! So you can really customize the look of your site.
To select a font for a Headline, Body or Label, scroll down to that section then select a font from the font family drop-down menu.
Once you are happy with all your font selections you can begin making Basic Edits to these font families.
To change the size of all the Headline variations, or Body variations at the same time, use the slider provided. Simply click and drag the slider left and right to make the font family smaller or bigger!
For most people, this will suffice in the customization of their Fonts. However, for those of you who love to customize every little detail of your site, we do provide advanced edits to fonts!
Saving A Custom Font Pack
Once you've made some Basic Edits to any of the preloaded Font Packs, you'll notice a new button appear - Save as Custom Pack ✨
This feature allows you to customize any pack to your heart's content, and save it for future use. After making your edits, simply click on that new button and save your new pack. Give it a name and identity to make sense of it for your entire team.
You can now rest assured knowing that if you play around with any edits in the future that you don't quite love, you can always reset to your branded pack.
Speaking of playing around with more edits...
Advance Edits
To make any Advance Edits on a section of fonts, click Actions, then Advance Edits.
Here you can make Advance Edits to all Headline, or all Body texts, or any family of fonts at once.
Feel free to make any changes you see fit! There is no real wrong choice you can make here. So have some fun!
Note: If you ever get too far gone from the original font and can't get back, just hit the, Reset to Default, button on the top!
If you wish to make changes to the individual Headline, or Body options, scroll down to the one you want to edit and click Expand Styles.
You can change the Font for a specific Headline, change the weight, size etc. Again, feel free to have some fun here!
Don't forget to hit Publish when you're done!
What Next?
Once you’ve designed your Header, it’s a great idea to move along to designing your Footer. Not only will the design options feel familiar, your website’s Footer is another super important aspect of your website.