Userflow themes include all Google Fonts and the standard web-safe fonts. If your brand font isn't one of those, you can add it with a few lines of CSS.
Before you start
You need the font files hosted somewhere your users' browsers can reach, in
.woff2format. Your own CDN works, as does the URL your font provider gives you.Custom CSS availability depends on your plan. If Edit custom CSS is greyed out in your theme, check your billing settings or contact support.
Font settings live on the main theme, not on theme variations.
Check whether your font is already available
Go to Settings → Themes and open the theme you want to change.
Expand the Font section.
Open the Font family dropdown and type your font's name.
If it appears in the list, select it and save. Userflow loads it for you and there's nothing else to do. Only continue if it isn't there.
Step 1: Select Custom font
In the Font family dropdown, choose Custom font. A Custom font family field appears below it.
Step 2: Enter the font name
Type the font name into Custom font family, followed by a fallback:
"Your Font Name", sans-serifThe fallback is what your users see while the font loads, or if it fails to load.
Two rules for the name:
To list several fonts, separate them with commas.
If the name contains a number on its own, wrap the whole name in double quotes:
"Gotham 2", notGotham 2.
Userflow tells you if the name isn't valid.
Step 3: Add the font files in Custom CSS
This step is required. The name from Step 2 tells Userflow which font to use, but not where to find it. Without this step, your users see the fallback font.
Userflow shows its content in iframes, which don't inherit fonts from your app's stylesheet, so the font has to be declared here.
Scroll to the Custom CSS section at the bottom of the theme.
Click Edit custom CSS.
Add one
@font-facerule per weight:
@font-face {
font-family: 'Your Font Name';
src: url('https://cdn.yoursite.com/yourfont-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Your Font Name';
src: url('https://cdn.yoursite.com/yourfont-bold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}The name in font-family must match what you entered in Step 2 exactly.
Step 4: Match the weights
Check Font weight (normal) and Font weight (bold) in the Font section, and add an @font-face rule for each number you find there. Buttons and launchers have their own weight settings further down the theme, so include those too.
Any weight you skip gets faked by the browser, which usually looks heavier and blurrier than the real thing.
Save the theme and preview a flow to check the result.
Using Adobe Fonts or another font service
Some services, including Adobe Fonts (Typekit), give you a stylesheet URL rather than font files you can host. Email support@userflow.com with that URL and we'll add it to your theme. For security reasons this field can't be edited directly, so it shows as read-only under Custom font CSS URL once it's set.