Overview

Custom fonts are added via the Default survey CSS in Edit settings. The CSS file has a dedicated section near the top for declaring fonts using @font-face — you upload your font files to the Send module, reference them in the CSS, and then update the font-family variables so every form component picks up your typeface automatically.

There are two steps: declaring the font (so the browser can find and load it), and applying it (so the CSS variables use it).

‍

Step 1 — Upload your font files

Font files need to be hosted at a publicly accessible URL. Upload them to an Application in the Send module and copy the CDN URL for each file.

• Use .woff2 as your primary format — it's the most efficient and supported by all modern browsers.
• Include a .woff fallback for older browser compatibility.
• Upload one file per weight — Regular (400), Bold (700), and any other weights your brand uses each need a separate file.

‍

Step 2 — Declare the font with @font-face

Open the Default survey CSS in Edit settings and find the Import your custom web fonts section near the top of the file. Add an @font-face block for each font weight, using the CDN URLs from the Send module.

1. In the Receive module, click Edit settings under Receive settings.
2. Scroll to the UI section and click View next to Default survey CSS.
3. In the Import your custom web fonts section, add an @font-face block for each weight. Replace the placeholder URLs with your hosted font file URLs and update the weight values to match.

@font-face {
  font-family: "YourFont";
  src: url(https://yourtenantname-cdn.cxengine.com.au/resources/yourapp/t/1/YourFont-Regular.woff2) format("woff2"),
       url(https://yourtenantname-cdn.cxengine.com.au/resources/yourapp/t/1/YourFont-Regular.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "YourFont";
  src: url(https://yourtenantname-cdn.cxengine.com.au/resources/yourapp/t/1/YourFont-Bold.woff2) format("woff2"),
       url(https://yourtenantname-cdn.cxengine.com.au/resources/yourapp/t/1/YourFont-Bold.woff) format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

‍

• Use the same font-family name in every block — the weight value is what differentiates them.
• List woff2 first, then woff — browsers use the first format they support.
• Include font-display: swap so the form renders immediately with a fallback font while your custom font loads, rather than showing invisible text.

Click Save.

‍

Step 3 — Apply the font using CSS variables

Declaring the font doesn't apply it automatically. You also need to update the Typography Setup variables in the same CSS file so all form components use your typeface.

1. In the Default survey CSS, scroll to the Typography Setup section inside the #surveyWrapper variable block.
2. Update the three font-family variables with your font name, followed by a system fallback stack:

--cx-font-heading: "YourFont", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--cx-font-body:    "YourFont", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--cx-font-buttons: "YourFont", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

‍

The font name here must exactly match the font-family name in your @font-face blocks — capitalisation and spacing included.

Click Save.

‍Make sure your weights match: The heading weight variables (--cx-h1-weight, --cx-h2-weight, etc.) control which weight is used for each heading level. If those variables reference a weight you haven't uploaded — for example, 600 when you only have 400 and 700 — the browser will fall back to the nearest available weight. Check the Typography Setup section and align the weight values with the files you've uploaded.

‍

Once saved, your custom font applies automatically across every published form — no republishing needed. If the font isn't rendering, check that the font-family name in the variables exactly matches the name in the @font-face block, and confirm the hosted font file URLs are publicly accessible.

‍