Custom Fonts

Most of our client sites will use Google Fonts (or Adobe Fonts) and we can easily paste a script in the site header to get them working - but sometimes they have a licensed font as part of their brand.
In these scenarios there is a bit more setup required to get it working on our sites.

1. Convert font files to .woff2 (required) and .woff (optional fallback)
2. Create an S3 Bucket for the site and upload font files into a "/fonts" folder
3. Serve via CloudFront
4. Load via @font-face in your CSS

#Convert to .woff2 and .woff

• https://anyconv.com/otf-to-woff2-converter/
• https://cloudconvert.com/otf-to-woff2

Upload to AWS S3 Bucket

Login to For Purpose AWS account - navigate to S3.
If a bucket already exists - just create a new folder "fonts".
If a bucket does not exist - click "Create Bucket" button - give it descriptive name and use the recommended settings.

• Namespace: Account Regional
• Object ownership: ACLs disabled
• Block public access: Enabled (all checked)
• Versioning: Disabled

This new site uses a Nav Folder structure.
The Top Nav pages should all be "folder" pages - which are not landing pages.

A nav folder will be added for every published page with "Included in top nav" checkbox checked.

As of 22 April 2026 - based on design - we have the following pages set up:

1. home (nav_hide)
2. about_us_folder
3. priorities_folder
4. news_folder
5. take_action_folder
6. get_involved_folder
7. other_folder (nav_hide)

Nav Folder data mappings:

• Headline = TOP_TEXT | BOTTOM_TEXT
• Content = Folder description (short sentence + optional link)

Nav Folder "tabs" will display:

• TOP_TEXT
• BOTTOM+TEXT

When a folder is open - the left side will display the following (hidden on mobile):

• TOP_TEXT
• Folder description

For each nested published page within a nav folder - a Nav Folder Item will be added if the "Include in top nav" checkbox is checked.

Nav Folder Item data mappings (default):

• Headline
• Excerpt
• Meta Image

And we have the ability to override these values - this is to allow for better optimized images and different folder description + social share descriptions. To override - add a nested published basic page tagged nav_folder_data underneath any Nav Folder Item page.

Nav Folder Item Override data mappings:

• Headline
• Content ( html stripped )
• Attached Image ( optimized WebP recommended )

The Navbar links are determined based on the NationBuilder pages that are ticked "Include in top nav". These pages can be seen in the control panel here:

• https://nzgreens.nationbuilder.com/admin/sites/1168/pages/nav

Relevant Page Tags

nav_hide

If a page is "included in the top nav" but you don't necessarily want it visible in the topnav (common to hide "Home" from nav since logo links... or if needed in top nav for sitemap.md purposes) you can remove it from the navbar by adding page nav_hide.