🎉 Did You Know NotionApps Just Got a Major Upgrade?

Announcements
1

We’ve added three powerful new tools—Custom Fonts, Custom CSS and Custom JavaScript—that let you take complete control over the look and feel of your published app. With these tools, you can brand your apps like never before and add helpful client‑side behaviours. Here’s a quick tour of what’s possible!

:fountain_pen: Custom Fonts: Give Your App Its Own Voice

You can now pick the exact typeface you want for your published app. Just enter the font family (e.g., “Poppins” or “Inter”) and a stylesheet URL if needed . The fonts load from Google Fonts or your own hosted CSS files , and once you save and re‑publish, your app text will use the new typeface .

  • Use popular Google fonts. To use Poppins, set Font family: Poppins and Stylesheet URL: https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap .
  • Switch to Inter or Roboto for a modern feel. Inter is great for clean interfaces ; Roboto is excellent for dashboard‑style apps .
  • Keep it classic with system fonts. Simply enter Font family: Arial or Helvetica Neue and leave the stylesheet field blank .
  • Bring your own brand font. If you host your own font CSS, provide the family name and stylesheet URL .

:artist_palette: Custom CSS: Fine‑tune Every Pixel

For deeper visual control, Custom CSS lets you style almost every visible element in the end‑user app . You can change text colors, buttons, form fields, lists, images and even responsive layouts . Here’s what you can do:

  • Style headings, paragraphs and links. Define typography and colours for each heading level, body text and labels , and create branded link styles .
  • Customize buttons and forms. Create branded buttons with hover and disabled states , and design inputs, textareas and dropdowns to match your brand .
  • Global changes made simple. Want to test your CSS? Use a universal selector to change all text to red . After saving and publishing, every bit of text will reflect the new color .
  • Reusable brand variables. Set CSS variables for your primary colours and fonts once and reuse them across buttons, headings and more .
  • Responsive design with media queries. Apply specific styles for mobile or large screens—for example, making buttons larger on mobile or adjusting font sizes on desktops .

Tip: Always scope your selectors to the end‑user root element ([data‑notionapps‑end‑user‑root="true"]) to ensure your CSS only affects the NotionApps app .

:brain: Custom JavaScript: Add Smart Behaviours

Custom JavaScript runs in the user’s browser and lets you augment the app with lightweight interactions . Use it to enhance usability, add messages or integrate simple analytics . Here are some inspiring examples:

  • Add branded content. Create a persistent footer note with your company’s tagline or a dismissible help banner for support info .
  • Personalize via URL parameters. Read parameters like ?source=client-email or ?theme=client and log them or apply a special class —perfect for custom themes .
  • Capture user behaviour. Send basic analytics events when pages load or track button clicks within your app .
  • Enhance navigation. Add a floating “Back‑to‑Top” button that smoothly scrolls users back to the top .
  • Extend carefully. Load approved external scripts (such as analytics libraries) only from trusted domains , handle errors gracefully , and avoid sensitive data in your scripts .

:rocket: Start Customizing!

These features are available for Premium and Enterprise plans . To enable them, open your app in the builder, go to the Settings panel, and toggle Custom Font, Custom CSS or Custom JavaScript. Save, publish and watch your app transform.

With custom fonts, CSS and JavaScript, you can make your NotionApps experience truly unique—matching your brand, improving usability and delighting your users. Have fun experimenting and show off your creativity!

Let me know if you’d like help crafting specific CSS or JS snippets—the possibilities are endless!