Skip to main content
🚀 We just launched on Product Hunt! Check it out →
Landing Pages

Adding Custom CSS and Fonts

3 min readUpdated Mar 10, 2026

Overview


Want pixel-perfect control? You can inject custom CSS and load custom fonts to fully brand your landing page.


Custom CSS


Where to add it


Go to **Settings → Custom Code → CSS**. The editor supports syntax highlighting and auto-complete for CSS properties.


Scope


Your CSS is scoped to the page and won't affect the GetLaunchDay UI. Use standard selectors to target sections:


/* Target hero section */

.section-hero h1 {

font-size: 3.5rem;

letter-spacing: -0.02em;

}


/* Custom button style */

.cta-button {

border-radius: 9999px;

box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4);

}


Live preview


Changes appear in real-time as you type. No need to save and refresh.


Custom fonts


Option 1: Google Fonts


Go to **Design → Typography → Custom Font**. Paste a Google Fonts URL:


https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap


Then set the font family in the design panel or via CSS.


Option 2: Self-hosted fonts


Upload your `.woff2` files via **Settings → Custom Code → Assets**, then reference them with `@font-face`:


@font-face {

font-family: "YourBrandFont";

src: url("/assets/your-font.woff2") format("woff2");

font-weight: 400;

font-display: swap;

}


body {

font-family: "YourBrandFont", sans-serif;

}


Best practices


  • Limit yourself to 1-2 font families for page load performance
  • Use `font-display: swap` to avoid invisible text during loading
  • Test on mobile — large headings may need smaller sizes on small screens
  • Was this article helpful?