# Sunflower AI — fonts

Two typefaces, both free and open-source (SIL Open Font License). The `.ttf`
files in this folder are the **variable** masters — one file covers every
weight on its axis. Install them locally, or use the Google Fonts CDN links
below for the web.

| Role | Family | File | Axes |
|---|---|---|---|
| **Display / brand** | Fredoka | `Fredoka-Variable.ttf` | weight 300–700, width 75–125 |
| **Body** | Mulish | `Mulish-Variable.ttf` | weight 200–1000 |

Licenses: `Fredoka-OFL.txt`, `Mulish-OFL.txt` (both SIL OFL 1.1 — free to use,
bundle, and embed, including commercially).

## How the brand uses them

- **Fredoka** is the display face: the **wordmark**, all headings ≥ 20 px, and
  gradient-clipped hero text. The wordmark is **Fredoka Bold (700)** at its
  default width (100).
- **Mulish** is the body face: everything < 20 px — paragraphs, captions,
  labels, buttons, eyebrows.

### Bold is reserved

700 weight is for the **wordmark**, inline `<strong>` emphasis, and small-caps
cap-mass only. Don't set body copy or links bold.

### Weight curves (how the site sizes type)

The site runs **inverse weight curves** — larger display text gets *lighter*,
smaller body text gets *heavier* — so optical weight stays even across sizes.
You don't need to reproduce this for a slide or a graphic, but for reference:

- **Fredoka headings** (≥ 20 px): ~wght 300 at 60 px → ~wght 410 at 20 px.
- **Mulish body** (< 20 px): ~wght 600 at 17 px → ~wght 620 at ~15 px →
  ~wght 650 at ~13 px.

When in doubt for a one-off graphic: **headings = Fredoka ~400**,
**body = Mulish ~600**, **wordmark = Fredoka 700**.

## Web (Google Fonts)

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Mulish:wght@200..1000&display=swap" rel="stylesheet">
```

```css
--font-display: "Fredoka", system-ui, sans-serif;          /* headings + wordmark */
--font-body:    "Mulish", system-ui, -apple-system, sans-serif;  /* body */
```

## Fallbacks

If Fredoka or Mulish can't be installed (e.g. a locked-down template), fall
back to a friendly geometric sans for display (Poppins, Nunito) and a neutral
humanist sans for body (Inter, system UI). The wordmark should always be set in
real Fredoka — use the logo lockups in `../logo/` rather than retyping it.
