Custom Font Guide
Subscription requirement
This feature requires a Pro through Enterprise NotionApps subscription. Users on other subscriptions may not see this option in the builder.
This guide explains how to use the Custom Font feature in NotionApps to apply brand typography to a published app.
Custom Font lets app builders change the typeface used in the rendered end-user app. This is useful for client-facing portals, internal tools, directories, forms, and other apps that need to match a customer or company brand.
Custom Font applies to the published end-user app, not to the NotionApps builder interface.
Who This Guide Is For
This guide is intended for:
App builders who want to apply a brand font to a NotionApps app.
Technical writers documenting app customization workflows.
Customer success teams helping users create client-facing apps.
Designers or developers who need the published app to match a brand system.
What the Custom Font Feature Does
The Custom Font feature lets you define the font family that should be used by the end-user app.
Depending on the font, you may also provide a stylesheet URL. The stylesheet URL is commonly used for web fonts from providers such as Google Fonts or for custom hosted font CSS files.
For example, if you want to use Poppins from Google Fonts, you would enter:
When the published app renders, NotionApps loads the stylesheet URL and applies the specified font family to the end-user app.
When to Use Custom Font
Use Custom Font when you want to:
Match a client's brand typography.
Use a Google Font such as Poppins, Inter, Roboto, Lato, or Montserrat.
Use a custom hosted brand font.
Improve consistency across headings, labels, buttons, and form fields.
Make a published app feel more polished and client-ready.
Do not use Custom Font to:
Hide or change app behavior.
Replace app permissions or field-level visibility.
Load untrusted third-party resources.
Add JavaScript or custom tracking.
Before You Begin
Before configuring a custom font, identify:
The exact font family name.
Whether the font is a system font, Google Font, or custom hosted font.
The stylesheet URL, if the font is not already available on the user's device.
The font weights needed by the app, such as 400, 500, 600, or 700.
The font family name must match the font's CSS family name. If the family name is misspelled, the browser will fall back to another font.
Add a Custom Font in the Builder
To add a custom font:
Open the app in the NotionApps builder.
Go to the app settings area.
Find the Custom Font section.
Enable Custom Font.
Enter the font family name.
Enter a stylesheet URL if the font needs one.
Save the app.
Publish or re-publish the app.
Open the published app and verify the font.
Understand the Custom Font Fields
Font Family
The Font Family field is the CSS font-family name that the published app should use.
Examples:
If the font name contains spaces, enter the normal family name in the field. NotionApps will apply it as a CSS font family.
Stylesheet URL
The Stylesheet URL field is optional for system fonts and required for most web fonts.
Use a stylesheet URL when the font must be loaded from the web.
Examples:
The stylesheet URL should point to a CSS file, not directly to a .woff, .woff2, .ttf, or .otf font file.
Example: Use Poppins from Google Fonts
Use this setup to apply Poppins throughout the published app.
After saving and publishing, the end-user app should render text using Poppins.
Example: Use Inter from Google Fonts
Use this setup to apply Inter.
Inter is a good option for clean, modern app interfaces because it is readable at small sizes.
Example: Use Roboto from Google Fonts
Use this setup to apply Roboto.
Roboto is a practical choice for operational apps, dashboards, and form-heavy experiences.
Example: Use a System Font
System fonts do not need an external stylesheet URL.
Example:
Another example:
System fonts load quickly because they are already available on the user's device. However, the exact appearance can vary by operating system.
Example: Use a Custom Hosted Brand Font
If a customer has a brand font hosted in a CSS file, enter the font family and the CSS file URL.
Example:
The CSS file should define the font with @font-face.
Example hosted CSS:
The font-family value in the hosted CSS must match the Font Family value entered in NotionApps.
Choosing Font Weights
Most apps need a small set of font weights:
400
Normal body text
500
Medium emphasis, labels, subtle headings
600
Buttons, section headings, stronger labels
700
Strong headings or bold emphasis
For Google Fonts, include the needed weights in the URL.
Example:
Avoid loading too many weights. More weights can increase page load time.
Use Custom Font with Custom CSS
The Custom Font feature applies the selected font broadly to the end-user app. If you need more control, combine Custom Font with Custom CSS.
For example, you may want headings to use one font and body text to use another.
Custom Font:
Custom CSS:
Apply the Font to All Elements with Custom CSS
If some nested elements do not appear to use the custom font, use Custom CSS to reinforce the font family:
Use this only when needed. In many cases, the Custom Font setting is enough.
Style Headings with the Custom Font
Use Custom CSS if headings should have a specific weight or size:
Style Buttons with the Custom Font
Use Custom CSS to make buttons use a specific weight:
Style Inputs with the Custom Font
Use Custom CSS to make form fields match the selected font:
Verify That the Font Loaded
After saving and publishing, open the published app and check the result.
Visual Check
Confirm that headings, labels, buttons, and form fields visually match the selected font.
Browser DevTools Check
Open browser DevTools and inspect a text element.
In the Computed styles panel, look for:
The selected custom font should appear in the computed font stack.
Page Head Check
If a stylesheet URL was used, inspect the page head and confirm that a stylesheet link appears.
Example:
Network Check
In DevTools, open the Network tab and reload the page.
Look for:
The stylesheet CSS file.
Font files such as
.woff2.Successful status codes, usually
200.
Troubleshooting
The Font Does Not Change
Check the following:
Custom Font is enabled.
The app was saved after editing the font settings.
The app was re-published.
The published app was hard-refreshed.
The font family name is spelled correctly.
The stylesheet URL is valid.
The stylesheet URL uses HTTPS.
The Stylesheet URL Loads but the Font Does Not Apply
The font family name may not match the font-family defined by the stylesheet.
For example, this Google Fonts URL loads Poppins:
The Font Family field should be:
Do not enter a different name such as:
The Font Looks Too Thin or Too Bold
The needed font weight may not be loaded.
If buttons use weight 600, make sure the URL includes 600.
Example:
Only Some Text Uses the Font
Some components may have more specific styles. Add Custom CSS:
The Font Works Locally but Not in Production
Check whether:
The font stylesheet is publicly accessible.
The URL uses HTTPS.
The font host allows the browser to load the font.
The stylesheet URL does not require authentication.
The app has been re-published after the font change.
The Font Works on Desktop but Not Mobile
Check the mobile browser's Network tab if possible. Some issues are caused by blocked font files, slow network loading, or unsupported font formats.
Prefer .woff2 for custom hosted fonts.
Performance Best Practices
Fonts affect page load performance. To keep the app fast:
Load only the weights you need.
Prefer
.woff2for custom hosted fonts.Use
font-display: swapin custom@font-facedefinitions.Avoid loading several unrelated font families.
Use system fonts when performance matters more than exact branding.
Accessibility Best Practices
When choosing a custom font:
Use a readable font for body text.
Avoid overly decorative fonts for forms, tables, or record lists.
Make sure text remains legible at small sizes.
Use adequate color contrast with the selected font.
Test on mobile and desktop.
A good client-facing app usually uses a clean, readable font with a small number of weights. The goal is brand alignment without sacrificing usability.
Recommended Font Setup Examples
Clean SaaS Style
Friendly Client Portal
Operational Internal Tool
Fast System Font Setup
Authoring Checklist
Before publishing, confirm:
Custom Font is enabled.
The Font Family value is correct.
The Stylesheet URL is correct, if required.
The app has been saved.
The app has been re-published.
The published app visually uses the selected font.
DevTools shows the expected
font-family.The Network tab shows the stylesheet and font files loading successfully.
Summary
The Custom Font feature helps app builders make published NotionApps apps feel more polished and on-brand. For most web fonts, enter the exact font family name and a valid stylesheet URL. For system fonts, enter the font family and leave the stylesheet URL blank. After saving and publishing, verify the result in the end-user app with a visual check and browser DevTools.
Last updated