Custom Fonts

Maker supports Google Fonts and custom fonts using text-based instructions inside the Style Guide assets tab. These instructions are used to generate the Style Guide that defines how fonts are applied across your projects.

---

Using Google Fonts

Maker automatically handles Google Fonts — they will render correctly both in the preview and live site.

You can reference Google Fonts directly in your instructions:

Fonts:
  • Primary: 'Playfair Display', serif;
  • Secondary: 'Open Sans', sans-serif;

---

Using Custom Fonts

To use custom fonts, you must upload them to the assets tab for the Style Guide

Guidelines:

• Upload the actual .ttf/.otf/.woff/.woff2 files in Assets, even if they are mentioned in the PDF you uploaded to the Assets.

• Always include fallback fonts (e.g., sans-serif, serif).

---

Steps to Apply Fonts

1. Go to Settings > Style Guide.

2. Select an existing theme or create a new one.

3. Click Assets and upload the custom font.

4. Click Generate to rebuild the theme.

5. Review the "Typography" tab in the Style Guide to confirm the fonts and links are listed.

---

Using Fonts in Prompts

After fonts are added to your Style Guide you they will be applied to any new project based on that Style Guide. You can also add a prompt in the project:

Use 'MyCustomFont' for H1 and 'Open Sans' for body text.
Use Google font: “Use Inter from Google Fonts for Body text.”
Use custom font: “Use ‘Acme Sans’ for H1/H2. It’s uploaded in my Style Guides.”

Maker will follow the font stack provided in your theme.

---

Typography Best Practices

• Font Scale: Base 16px with a 1.25–1.5 scale ratio for headings.

• Line-height: 1.4–1.6 for body text; 1.2–1.3 for headings.

• Hierarchy: Set consistent sizing for H1–H6 and paragraph text.

• Weight & Contrast: Use bold for emphasis; ensure legibility and accessibility (WCAG AA).

• Spacing: Maintain consistent vertical rhythm across sections.

---

By specifying fonts directly in your Style Guide Typography, you ensure visual consistency across generated pages while supporting both Google and custom fonts in a predictable, reliable way.

---