Custom Fonts in the Site Builder

Overview

BizStackPro’s Site Builder includes built-in typography controls for fast, consistent branding—plus the ability to load custom fonts when you need a more unique look. This guide covers how to set global headline/content fonts, customize fonts on specific elements, and import fonts using CSS or HTML.

Available Default Fonts in Sites

You can quickly configure global typography and adjust fonts for specific elements using built-in controls.

Set global typography (headline + content fonts)

1. Go to Sites in the left navigation.
2. Open Funnels/Websites (or your site builder area).
3. Edit the funnel step or page you want to customize.
4. In the top builder menu, open the Menu and click Typography.
5. Select your global Headline font and Content font.
6. Save and preview your page to confirm styling.

Customize a specific element

1. Click the text element you want to update.
2. Use the element toolbar/typography options to adjust:
   • Font family
   • Google Font selection (when available)
   • Basic styles (size, weight, spacing)
3. Save and preview on desktop + mobile to confirm readability.

Use Custom Fonts with CSS

CSS (Cascading Style Sheets) controls the appearance of your pages—layout, colors, and fonts. If you want to use a font that isn’t available in the default typography menus, you can load it and apply it using custom CSS rules.

Method 1 — Add custom CSS (global rules)

1. Open the funnel/website builder and edit the page.
2. In the top menu, open Custom CSS (or the Tracking Code area if that’s where you store CSS).
3. Paste your CSS rules (for example, font import + global font-family).
4. Save and preview the page.

Method 2 — Target specific sections with selectors

Use CSS selectors (classes/IDs) to apply fonts only where needed—like hero headings or callout blocks.

• Add a custom class to an element/section in the builder (example: brand-heading).
• Write a rule like .brand-heading { font-family: "YourFontName", sans-serif; }.
• Preview and adjust until it matches your brand style guide.

Method 3 — Import fonts using CSS or HTML

You can load external fonts using either CSS imports or an HTML link tag (depending on your setup and where you inject code).

• CSS @import: Add an @import line near the top of your custom CSS block.
• HTML <link> tag: Add a font link snippet using a Code element or a head-injection method you already use.

Best Practices for Custom Fonts

• Keep it consistent: Limit font choices (usually 1–2 families total) for a clean brand look.
• Set global fonts first: Use Typography settings for headlines + content, then customize exceptions with CSS.
• Test readability: Preview on desktop and mobile—especially for smaller text sizes.
• Use fallbacks: Always include a fallback like sans-serif in your font-family stack.
• Get help if needed: If you’re unsure about CSS/HTML, work with a developer for advanced imports.