Fonts

Within the 'Design' node located in the back office of the Govstack CMS, you can select the font options to use throughout your website. You can also assign specific fonts to different parts of your website, such as headings, body text, intros, blockquotes, buttons, dropdowns and more. 

Updating the fonts for your website

To select the fonts to be used throughout your website:

1. Navigate to the 'Design' node in the Govstack back office
2. Select the design style that is currently in use for your website (there is likely only one option available)
3. Select the 'Fonts' tab 
4. Select the '+' icon under the 'Fonts' section
5. Select 'System' if you would like to select a System font or 'Google' if you would like to select a Google font
6. Choose one of the fonts from the options presented in the 'Font Family' dropdown menu. You can preview the font alongside your selection
7. Select from the options presented in the the 'Font Style' dropdown menu
8. Select the weight of your font with the options available in the 'Font Weight' dropdown menu
9. Collapse the font option when you are finished and repeat steps 4 to 9 to add additional fonts for your website
10. You can re-order your font selection by clicking and dragging a font type's directional arrow button above or below other font selections. The order is presented in your editor tools when creating content for your website
11. You can delete a previously created font selection by selecting the trash can icon and selecting 'Yes, delete' in the prompt
12. Select 'Save and publish' when you are happy with your chosen fonts.

Adobe fonts

If you have an Adobe licence, you can choose to use Adobe fonts on your website. Reach out to your IT department to find out if this option is available for your organization.

Assigning fonts to different parts of your website

To assign your chosen fonts to different parts of your website, follow these steps:

1. Under the 'Typography' section of the 'Fonts' tab, expand each text selection to attribute your chosen font and its height and spacing
2. Use the 'Font' dropdown menu to choose which font you'd like 
3. Use the  'Line Height' percentage to configure the height of each row of text and the spacing between each line of text
4. Use the 'Letter Spacing' option to increase or decrease the spacing between letters within your text
5. The 'Text Transform' option allows you to automatically attribute all uppercase text, all lowercase text, or capitalized text to your text element
6. The font size options allow you to choose what point font (or  pixel size) you would like your text to appear in that text element. You can preview the size by selecting the eye icon next to each screen size option. You can view screen size font previews for desktop, laptop, tablet, mobile (held horizontally) and mobile (held vertically)
7. Collapse each text element when you are finished configuring its typography and move on to the next text element. Elements include various heading levels, body text, introductions, blockquotes, buttons, navigation areas, dropdowns and logo
8. Select 'Save and publish' when you are happy with the font settings