Your storefront should look consistent with your main website. This includes fonts for headings and body text. Typography settings let you set a separate font for Headings and for Body text. Both accept a Font URL and a Font Family value. You can source fonts from Google Fonts or use your own hosted files.
In this article:
Understand what each typography setting controls.
Get the correct Font URL and Font Family values from Google Fonts or your own stylesheet.
Apply fonts to your storefront and verify the result.
Before you begin
Admin access required. You need admin permissions to access Growth Hub in the Flex Admin Portal.
Font source ready. Decide whether you are using Google Fonts or your own hosted font files before starting. You will need 2 values from your font source: a Font URL and a Font Family.
Overview
Typography in Growth Hub controls how text is displayed across your storefront. You can configure 2 font slots independently.
Font groups | What it affects | Recommendation |
Headings | Page titles and section headings across the storefront | Match your brand's primary display font |
Body | Descriptions, labels, and all UI text | Use a sans-serif font for readability and consistency with the UI |
Each font slot requires 2 values:
Font URL. The URL that loads the font stylesheet. This tells the browser where to fetch the font from.
Font Family. The CSS font-family value that applies the font. This must exactly match the family name in the loaded stylesheet.
Both values are required. If either the Font URL or the Font Family is missing or incorrect, the storefront falls back to the default font. Check both values if a font is not applying.
Apply fonts to your storefront
To set your Heading and Body fonts in Growth Hub:
Open the Flex Admin Portal and go to Growth Hub > Storefront Settings > Branding.
In the Typography section:
Enter the Font URL and Font Family for headings.
Enter the Font URL and Font Family for body text.
Click Save.
Get the font family value
The Font Family value is the CSS font-family declaration for your chosen font. You need to copy this exactly as it appears in the stylesheet.
From Google Fonts
Go to Google Fonts and select your font.
In the font specimen page, look for the CSS section or the font-family example.
Copy the full font-family value, including the fallback stack.
Example Font Family value: "Roboto", sans-serif
Paste this value exactly into the Font Family field, including the quotation marks and fallback.
From your own stylesheet
Open the CSS file that defines your font.
Find the
font-familydeclaration for the font you want to use.Copy the full value, including any fallback fonts.
Get the font URL
The Font URL is the stylesheet link that loads the font. Most issues with fonts not applying come from pasting the wrong part of this link.
From Google Fonts
Go to Google Fonts and select your font.
Select View Selected Families (the shopping bag icon in the top right).
Select Get Embed Code.
Open the Web tab.
Find the
<link>tag in the embed code.Copy only the URL inside the quotation marks of the href attribute.
Correct Font URL example: https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap
Copy only the URL, not the full link tag. Do not include this part in the Font URL field: <link href=" or " rel="stylesheet">. Paste only the URL itself, starting with https://.
Include a range of font weights
When building your Google Fonts URL, include a range of weights rather than just a single weight. Growth Hub uses lighter weights for body readability and heavier weights for emphasis.
To include a weight range, use the wght axis with a range value:
Why a weight range matters: If you load only 1 weight (for example, 400), bold text across the storefront may not render correctly because the browser cannot find the heavier weight variant. Loading a range (200..800) covers all the weights the storefront uses.
Using your own hosted font
If you host your own font files, paste the public URL of the CSS stylesheet that loads the font. This is typically a file that contains the @font-face rule defining your font.
The URL must be publicly accessible. If the stylesheet requires authentication or is on a private server, the font will not load on your storefront.
Use HTTPS. HTTP URLs may be blocked by the browser. Ensure your font stylesheet is served over HTTPS.
Test the URL directly. Paste the Font URL into a browser address bar and confirm the CSS file loads. If it does not, the font will not apply on the storefront.
Verify the fonts are applied
After saving, confirm that the fonts render correctly on your storefront.
Open your storefront in a browser.
Check the headings on your main listing page.
Check descriptions and UI labels to verify body text.
If the font has not updated, hard refresh the page (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac).
Fonts fall back to the default if either value is incorrect. If headings or body text look unchanged after saving, double-check both the Font URL and the Font Family value. A single character error in either field will prevent the font from loading.
Best practices
Match your main website fonts. If your website uses a specific heading and body font, use the same values here. Consistent typography across your site and storefront reinforces your brand and avoids a disjointed experience for customers.
Use a sans-serif fallback for body text. Always include a generic fallback (for example, sans-serif) after your font family name. If the font fails to load, the browser uses the fallback rather than rendering in an unintended typeface.
Load font weights as a range, not individually. A range like 200..800 in your Google Fonts URL is more reliable than specifying individual weights. It ensures all text styles across the storefront render as intended.
Test on mobile after applying changes. Font rendering can differ between desktop and mobile browsers. Check your storefront on a mobile device after saving to confirm the result looks correct at smaller screen sizes.
If you update your font hosted at the same URL, clear the cache. Browsers cache font files aggressively. If you replace a self-hosted font file without changing the URL, customers may see the old font for days. Append a version query string (for example, ?v=2) to force a fresh load.
Frequently asked questions
I saved a font, but the storefront still shows the default font. What should I check?
Check both values. Start with the Font URL: paste it directly into a browser to confirm it loads a CSS file. If it does not load, the font cannot be applied. Then check the Font Family value: confirm it matches the font-family name exactly as it appears in the loaded stylesheet, including capitalization and any quotation marks.
Can I use different fonts for headings and body text?
Yes. Each font slot is configured independently. You can use a display font for headings and a separate sans-serif font for body text. They each require their own Font URL and Font Family values.
Do I need to set both Headings and Body, or can I set just one?
You can set either slot independently. If you only configure Headings, body text continues to use the default font. If you only configure Body, headings continue to use the default font.
My Google Fonts URL works in the browser, but the font is not loading on the storefront. What is wrong?
Check 2 things:
Confirm that you pasted only the URL itself, not the full link tag. The field should start with https:// and contain no HTML.
Confirm the Font Family value matches exactly. Google Fonts uses specific family names like "Inter" or "Roboto".
A mismatch between what the URL loads and what the Font Family field specifies is the most common cause of this issue.
Can I use a font that is not on Google Fonts?
Yes. Host your font CSS file on your own server and paste the public URL into the Font URL field. The CSS file must define the @font-face rule and must be publicly accessible over HTTPS. Fonts from other hosted services work the same way as long as you can get a direct URL to the stylesheet.