Custom Fonts

Maker supports Google Fonts and custom fonts using text-based instructions inside the Theme Instructions field. These instructions define how fonts are applied across your projects.

⚠️ Important:

Custom fonts will only render in the editor preview if:

• They are installed on your device, or

• You include a valid, publicly hosted font link the editor can access.

On the live website, custom fonts will display correctly as long as they are properly linked and hosted via external CSS or @font-face.

---

Using Google Fonts

You can reference Google Fonts directly in your instructions:

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

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

---

Using Custom Fonts (Hosted Externally)

To use custom fonts, you must define them with external URLs in the Theme Instructions. Here's an example of a valid setup:

Fonts:
  • Primary: 'MyCustomFont', sans-serif;
  • Secondary: 'Open Sans', sans-serif;
  • External CSS: https://cdn.example.com/fonts.css
  • @font-face:
      font-family: 'MyCustomFont';
      src: url('https://cdn.example.com/MyCustomFont.woff2') format('woff2');

Guidelines:

• Use direct links to .woff or .woff2 files or an external stylesheet (fonts.css).

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

• Make sure the external links are accessible without authentication or IP restrictions.

---

Steps to Apply Fonts

1. Go to Settings > Themes.

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

3. Click Add Instructions and paste your font definitions.

4. Click Generate to rebuild the theme.

5. Review the Theme Description to confirm the fonts and links are listed.

---

Using Fonts in Prompts

After fonts are defined in the instructions, you can guide the AI to use them:

Use 'MyCustomFont' for H1 and 'Open Sans' for body text.

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 Theme Instructions, you ensure visual consistency across generated pages while supporting both Google and custom fonts in a predictable, reliable way.

---