Fonts & typography¶
Global settings
Flexoraa uses one font family across the site by default, with separate control for headings and body text.
Fonts¶
| Role | Font | Notes |
|---|---|---|
| Headings | Outfit (Google) | Titles and headings site-wide |
| Body & buttons | Outfit (Google) | Paragraphs, labels, button text |
Set both in Theme Settings > Fonts. Change the heading font to restyle every title at once.
Custom fonts¶
Every font field in the theme, including Theme Settings > Fonts, pulls from Google Fonts by default. If your brand uses a font that isn't on Google Fonts, HubSpot lets you upload your own font files at the account level. Once uploaded, that font is available in any font field on the portal, not just Flexoraa's.
Uploading a font¶
- In the HubSpot navigation, click the three dots at the end of the left sidebar.
- Click Marketing, scroll down a little, and click Brand.
- This opens the Brand Identity page. Scroll down to the Fonts section, where you'll see Primary, Body, and Fallback options.
- Click Add on any of them. A sidebar opens.
- In the sidebar, find the Custom font section and click Add a custom font.
- Enter a Font name.
- Upload your font files in the upload section (see file formats below).
- Click Next.
- You'll now see a font style dropdown on the left for each file you uploaded on the right. Match each file to its correct style, such as Regular, Medium, Bold, or Italic, using the dropdown.
- Click Save.
Font file formats¶
| Format | Notes |
|---|---|
.woff2 | Smallest file size and the best compression. Supported by all current browsers. Upload this whenever your foundry provides it. |
.woff | Slightly larger than woff2 but still widely supported. A good second file to upload alongside woff2. |
.ttf / .otf | Original desktop font formats. Much larger files, meant as a last resort if woff or woff2 isn't available. |
Upload more than one format
Uploading both .woff2 and .woff for each style lets the browser pick the smaller file it supports, so pages load faster without any extra setup on your side.
Using the custom font¶
Once saved, open any font field, for example Theme Settings > Fonts > Primary or Secondary. In the font picker, look for the Custom font label. Your uploaded font appears underneath it and can be selected exactly like a Google font.
Heading sizes¶
All headings use weight 600 by default.
| Level | Desktop | Tablet | Mobile | Line height |
|---|---|---|---|---|
| H1 | 60px | 48px | 36px | 1.1 |
| H2 | 48px | 36px | 28px | 1.15 |
| H3 | 36px | 28px | 24px | 1.2 |
| H4 | 24px | 22px | 20px | 1.3 |
| H5 | 20px | 18px | 16px | 1.35 |
| H6 | 16px | 16px | 16px | 1.4 |
Body text¶
- Size: 16px on all devices.
- Color:
#5A6472(the scheme's muted text color). - Line height: 1.7.
Links¶
- Color: Tertiary (
#5B80F4). - Hover color: Secondary (
#029CF5). - Underline is off by default.
Per-module overrides
Modules can override heading level and size where it makes sense, for example a hero title, but they inherit these global fonts and colors unless you change them.
Lists¶
Bulleted and numbered lists in rich text and description fields use the theme's own markers, not the browser's. Set them in Theme settings › Elements › List items.
Unordered lists¶
| Setting | Options | Default |
|---|---|---|
| List style type | Circle / Square / Tick / Arrow / Chevron | Circle |
| Width, Height | per breakpoint | 6px each |
| Icon stroke width | 1 to 5 | 2.5 |
| Space between icon and text | per breakpoint | 24px |
| Spacing between list items | px | 12px |
Ordered lists¶
| Setting | Options | Default |
|---|---|---|
| List style type | Numbers / Numbers with zero / a b c / A B C / i ii iii / I II III | Numbers |
| Number font size | per breakpoint | 16px |
| Space between icon and text | per breakpoint | 32px |
Nested numbered lists count automatically: a list inside a list reads 1.1, 1.2.
Marker colour follows the section scheme
Markers take their colour from the section's Light or Dark scheme, so they flip with everything else. There is no separate colour field to set.
Sizing markers per breakpoint
Width, height, the gap to the text, and the marker's distance from the top can each be set for desktop, tablet and mobile. All three start equal, so a list looks unchanged until you set one. Shrink the marker on mobile and shrink the text gap with it, or a small dot ends up with a large gap beside it.
Icon stroke width applies to three styles only
Tick, Arrow and Chevron are drawn from a stroked SVG, so the width changes them. Circle and Square are solid shapes, so the field is hidden when either is chosen.
Rich text elements¶
A rich text field takes whatever the client types, so it can contain a table, a pulled quote, a code block or a horizontal rule as well as paragraphs and lists. Those four are styled in Theme settings › Elements › Rich text elements, beside List items.
You do not have to set a colour for any of them. Every colour defaults to the colour scheme of the section the content sits in, so the same table stays readable whether it lands on a Light or a Dark section.
Custom colours come in pairs
Switching any colour from Default to Custom reveals a [light] and a [dark] value. Set both. That is what keeps a custom colour swapping with the section the way the default did. A single colour would be right on one scheme and wrong on the other, which is the mistake this pattern exists to prevent.
Tables¶
| Setting | Options | Default |
|---|---|---|
| Border colour | Default / Custom | default |
| Border width | 0 to 5 px | 1px |
| Cell padding [horizontal] | 0 to 40 px | 14px |
| Cell padding [vertical] | 0 to 40 px | 10px |
| Header row background | Accent / None / Default / Custom | accent |
| Header row font | typeface + weight | 600 |
| Border colour [dark] (Custom only) | colour | #2A2F3A |
| Border colour [light] (Custom only) | colour | #E2E8F0 |
| Header row background [dark] (Custom only) | colour | #1C1F27 |
| Header row background [light] (Custom only) | colour | #FBFCFE |
Block quotes¶
| Setting | Options | Default |
|---|---|---|
| Quote bar colour | Default / Custom | default |
| Quote bar width | 0 to 10 px | 3px |
| Quote font | typeface + weight | regular |
| Quote indent | 0 to 60 px | 18px |
| Quote text colour | Default / Custom | default |
| Quote bar colour [dark] (Custom only) | colour | #2A2F3A |
| Quote bar colour [light] (Custom only) | colour | #E2E8F0 |
| Quote text colour [dark] (Custom only) | colour | #93A0B3 |
| Quote text colour [light] (Custom only) | colour | #5A6472 |
Code¶
| Setting | Options | Default |
|---|---|---|
| Code background | Default / Custom | default |
| Code block padding [horizontal] | 0 to 40 px | 16px |
| Code block padding [vertical] | 0 to 40 px | 14px |
| Code font | typeface + weight | regular |
| Inline code padding [horizontal] | 0 to 1 em | 0.4em |
| Inline code padding [vertical] | 0 to 1 em | 0.15em |
| Corner rounding | 0 / S / M / L | round-s |
| Code text size | 0.7 to 1 | 0.9 |
| Code background [dark] (Custom only) | colour | #1C1F27 |
| Code background [light] (Custom only) | colour | #FBFCFE |
Dividers¶
| Setting | Options | Default |
|---|---|---|
| Line colour | Default / Custom | default |
| Space above and below | 0 to 6 | 2 |
| Line thickness | 0 to 10 px | 1px |
| Line colour [dark] (Custom only) | colour | #2A2F3A |
| Line colour [light] (Custom only) | colour | #E2E8F0 |
Code keeps its monospaced font unless you change it
Code font is empty on purpose. Left empty, code uses the system monospaced stack, which is what makes code read as code. Set a face here only if you want a specific one, such as JetBrains Mono or Fira Code. It deliberately does not follow the body font.
Corner rounding follows the theme scale
Corner rounding for code reads the S, M and L steps from Spacing, gaps & radius, so code stays in step with cards and buttons rather than carrying its own fixed value.
Divider space above and below is a multiple of the paragraph spacing rather than a pixel value, so a rule keeps its proportion to the copy around it if you change that spacing later. At the default paragraph spacing of 16px, a multiplier of 2 gives 32px above and below.