# 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.

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.maker.co/tips-and-tricks/custom-fonts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.