# Fonts + Wordmark Outline-Path Export

Two related deliverables documented together because both depend on having **Fraunces Variable** installed in a design tool.

---

## Part 1 — Self-host fonts (replaces Google Fonts CDN)

### Current state

This design system loads its three typefaces (Fraunces, Inter, IBM Plex Mono) from the **Google Fonts CDN** via the `@import` rule in [`colors_and_type.css`](colors_and_type.css). That works in any browser online but introduces:

- A network dependency on every Tehom-family surface
- A privacy concern (Google sees every load)
- A failure mode when a customer environment blocks third-party requests

### What to do

Download the variable-font TTFs from each project's GitHub release and place them in [`fonts/`](fonts/). All three are SIL OFL (free for any use).

| Family | Source | File to download | Place at |
|---|---|---|---|
| **Fraunces** | https://github.com/undercasetype/Fraunces/releases | `Fraunces[SOFT,WONK,opsz,wght].ttf` | `fonts/Fraunces.ttf` |
| **Inter** | https://github.com/rsms/inter/releases | `Inter-Variable.ttf` | `fonts/Inter.ttf` |
| **IBM Plex Mono** | https://github.com/IBM/plex/releases | `IBMPlexMono-Variable.ttf` | `fonts/IBMPlexMono.ttf` |

Then **swap the `@import` line at the top of `colors_and_type.css`** with the existing `@font-face` rules in [`fonts/fonts.css`](fonts/fonts.css):

```css
/* Before: */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap");

/* After: */
@import url("./fonts/fonts.css");
```

The `fonts.css` file is already written — it expects the three files at the paths above and exposes the same family names (`Fraunces`, `Inter`, `IBM Plex Mono`) so no other CSS needs to change.

### Verification

Open `index.html` for any UI kit (e.g. `ui_kits/marketing/index.html`) **with the network disabled in DevTools**. Headlines should still render in Fraunces Light, body in Inter, code in IBM Plex Mono. If they fall back to Georgia / system-ui / Menlo, the font files aren't being found.

---

## Part 2 — Outline-path export for Yehi and Or wordmarks

### Why

The Tehom canonical wordmark files (`tehom-wordmark-dark.svg`, `tehom-wordmark-light.svg`) store the lowercase "tehom" glyphs as **outlined `<path>` data** — converted from Fraunces Light at `opsz=144, wght=300`. They render identically anywhere, with no font dependency. This is the canonical approach for all Tehom-family wordmarks.

The Yehi and Or wordmark drafts in this project render their text as live SVG `<text>` elements. They look correct only on systems where Fraunces is available. **Production canonical use requires the outline-path step.**

### Files affected

```
brand_family/yehi/wordmark-dark.svg
brand_family/yehi/wordmark-light.svg
brand_family/yehi/lockup-horizontal-dark.svg
brand_family/yehi/lockup-horizontal-light.svg
brand_family/yehi/lockup-stacked-dark.svg
brand_family/yehi/lockup-stacked-light.svg
brand_family/yehi/lockup-attribution.svg

brand_family/or/wordmark-dark.svg
brand_family/or/wordmark-light.svg
brand_family/or/lockup-horizontal-dark.svg
brand_family/or/lockup-horizontal-light.svg
brand_family/or/lockup-stacked-dark.svg
brand_family/or/lockup-stacked-light.svg
brand_family/or/lockup-attribution.svg
```

14 files total. Each needs the `<text>` element replaced with a `<g>` containing outlined `<path>` data.

### Designer process

Tooling options (any of these works):

1. **Affinity Designer / Illustrator / Inkscape:**
   - Open the SVG.
   - Select the `<text>` element.
   - Apply *Convert to Curves* (Affinity) / *Type → Create Outlines* (Illustrator) / *Path → Object to Path* (Inkscape).
   - Save / export back to SVG.

2. **Command-line** (if you have FontForge or the `font2svg` family of tools):
   ```bash
   # Example via Python + fonttools — convert "yehi" at opsz=144 to outlined SVG
   python3 -m fontTools.subset Fraunces.ttf --text=yehi --output-file=yehi-subset.ttf
   # then convert glyphs to paths with your favorite tool
   ```

3. **Online converters** (last resort — verify output by eye): paste the SVG into convertio.co, opensvg.com, etc. with the requirement "convert text to path." Always verify the path geometry matches the live `<text>` rendering.

### Exact spec — must hit these values

| Spec | Value |
|---|---|
| Font | **Fraunces** (variable) |
| Optical size (`opsz`) | **144** |
| Weight (`wght`) | **300** |
| `SOFT` / `WONK` axes | minimum (default) |
| Letter-spacing | `-0.035em` (lowercase wordmarks: `tehom`, `yehi`, `or`) |
| Color (dark variants) | `#FAF7F2` (`--tehom-light`) |
| Color (light variants) | `#050A10` (`--tehom-deep`) |
| Background (dark variants) | `#050A10` |
| Background (light variants) | `#FAF7F2` |

After outlining, the canvas dimensions and mark geometry **must not change** — only the wordmark `<text>` becomes a `<g>` of `<path>` data.

### Verification

For each file:

1. Open the outlined SVG in a browser **with no fonts available** (or in any `<img>` context — `<img src="...">` SVGs cannot load `<style>` blocks or CSS imports).
2. The wordmark must render identically to the live-text version.
3. Compare side-by-side against the Tehom wordmark for typographic consistency — same weight, same letter spacing, same baseline alignment relative to the mark.

If any glyph reads slightly heavier than the Tehom outline-path equivalent, the font axes are misset (most commonly: `opsz` wasn't pinned at 144).

---

## When this is done

Once both deliverables ship:

- The design system has **no remaining CDN dependencies** for type.
- The Yehi and Or wordmarks render **identically anywhere** — same property the Tehom wordmark already has.
- The promotion bundle in [`promotion/`](promotion/) can ship to `brand/tehom-brand-assets/` and the v1.4 lock criteria are fully met (modulo founder review of the v1.4 brand-guidelines draft).