# Font & Image Asset Reference

Self-hosted, ready-to-paste `@font-face` blocks for every font file that downloaded successfully into `assets/fonts/`, plus the downloaded image asset table. All fonts are free, OFL-licensed Google Fonts, latin-subset only, fetched directly from `fonts.gstatic.com` via the `css2` API (Chrome UA spoof to force woff2). All 15 requested families succeeded — nothing was skipped.

`url()` paths below assume the consuming stylesheet lives two directories deep (e.g. `src/styles/fonts.css`) — adjust the `../../` prefix to match wherever you actually paste these blocks.

---

## Live-site self-hosted fonts (informational — already covered below)

Inspecting the live site's compiled CSS (`/_next/static/chunks/24hlchqz_qc6w.css`) shows tpengdesign.com self-hosts exactly two families via `next/font` (Google Fonts, OFL-licensed):

- **Fraunces** — variable, `font-weight: 100 900`, both `normal` and `italic`, used as `--font-fraunces` (the display/heading face — all H1s, italic taglines, and project titles are set in Fraunces).
- **Newsreader** — variable, `font-weight: 200 800`, both `normal` and `italic`, used as `--font-newsreader` (the body/text face).

Both are already in the "20 concepts" list below (`fraunces-var.woff2` / `fraunces-var-italic.woff2`, `newsreader-var.woff2` / `newsreader-var-italic.woff2`), so no separate action was needed — they were downloaded as part of the standard font pull, not specially fetched for this purpose.

---

## @font-face blocks

### Serif / display

```css
/* Fraunces — variable, optical size 9–144pt, weight 100–900 */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../assets/fonts/fraunces-var.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../assets/fonts/fraunces-var-italic.woff2") format("woff2");
}
```
Personality: a wet-ink serif with dramatic, almost baroque contrast at high optical sizes and a warm, humanist calm at low ones — the site's own display face, doing heavy-italic taglines and outsized H1s. Editorial, a little theatrical, never cold.

```css
/* Newsreader — variable, optical size 6–72pt, weight 200–800 */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../../assets/fonts/newsreader-var.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../../assets/fonts/newsreader-var-italic.woff2") format("woff2");
}
```
Personality: a modern transitional serif built for long-form reading — literary, quiet, unfussy. Good body-copy counterweight to a louder display face.

```css
/* EB Garamond — variable, weight 400–800 */
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../../assets/fonts/eb-garamond-var.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("../../assets/fonts/eb-garamond-var-italic.woff2") format("woff2");
}
```
Personality: a classical old-style Garamond revival — restrained, bookish, historically grounded. Reads as heritage/institutional trust rather than trend.

```css
/* Instrument Serif — 400 normal + 400 italic (static, no variable axis) */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/fonts/instrument-serif-400.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/fonts/instrument-serif-400-italic.woff2") format("woff2");
}
```
Personality: high-contrast, slightly quirky didone-adjacent serif with a distinctive italic — fashion-editorial, confident, best used sparingly at large display sizes.

```css
/* Libre Caslon Display — 400 normal only */
@font-face {
  font-family: "Libre Caslon Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/fonts/libre-caslon-display-400.woff2") format("woff2");
}
```
Personality: a tight, condensed-feeling Caslon built specifically for large display type — punchy, confident, works well as a poster/headline face rather than for text.

### Sans / grotesque

```css
/* Space Grotesk — variable, weight 300–700 */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../../assets/fonts/space-grotesk-var.woff2") format("woff2");
}
```
Personality: a proportional grotesque with slightly quirky, squared-off details — technical but friendly, a default "modern startup" sans without being generic.

```css
/* Archivo — variable, width 62–125%, weight 100–900 */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../../assets/fonts/archivo-var.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../../assets/fonts/archivo-var-italic.woff2") format("woff2");
}
```
Personality: a rigorous, versatile grotesque with a full width axis (condensed to expanded) — neutral, editorial, works equally well as body copy or a headline face. The utility player of this set.

```css
/* Syne — variable, weight 400–800 */
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../../assets/fonts/syne-var.woff2") format("woff2");
}
```
Personality: an asymmetric, experimental grotesque with unconventional letterforms — art-directed, gallery/portfolio energy, best at large display sizes where its idiosyncrasies read as intentional.

```css
/* Unbounded — variable, weight 200–900 */
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../../assets/fonts/unbounded-var.woff2") format("woff2");
}
```
Personality: a geometric sans with rounded, almost bubble-letter joints at heavy weights — bold, maximalist, leans toward tech/Web3/youth-brand energy.

```css
/* Bricolage Grotesque — variable, optical size 12–96, weight 200–800 */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../../assets/fonts/bricolage-grotesque-var.woff2") format("woff2");
}
```
Personality: an optical-size-responsive grotesque that shifts character between text and display sizes — quirky and a little wonky at large scale, settles down and reads cleanly at small scale. Distinctive without being loud.

```css
/* Manrope — variable, weight 200–800 */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../../assets/fonts/manrope-var.woff2") format("woff2");
}
```
Personality: a clean, semi-rounded geometric sans — approachable and highly legible at UI sizes, the safest "modern SaaS" choice in this set.

```css
/* Work Sans — variable, weight 100–900 */
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../assets/fonts/work-sans-var.woff2") format("woff2");
}
@font-face {
  font-family: "Work Sans";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../assets/fonts/work-sans-var-italic.woff2") format("woff2");
}
```
Personality: a grotesque-humanist hybrid tuned for screen legibility across a huge weight range — quiet, professional, disappears into the content rather than asserting a personality. Good body-copy workhorse.

### Monospace

```css
/* IBM Plex Mono — 400 + 500 (static weights) */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
}
```
Personality: IBM's corporate-humanist mono — warm for a monospace, slightly rounded terminals, reads as considered engineering rather than raw terminal grit.

```css
/* Space Mono — 400 + 700 (static weights) */
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/fonts/space-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../assets/fonts/space-mono-700.woff2") format("woff2");
}
```
Personality: a quirky, slightly retro-futurist mono with distinctive character shapes — good for small accent/label text (the way tpengdesign.com uses its uppercase "label" elements), less good set as long paragraphs.

```css
/* JetBrains Mono — variable, weight 100–800 */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../../assets/fonts/jetbrains-mono-var.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url("../../assets/fonts/jetbrains-mono-var-italic.woff2") format("woff2");
}
```
Personality: a highly legible, developer-tool mono designed to reduce visual noise in code — the most "neutral engineering" of the three monos here, best where legibility at small sizes matters more than character.

---

## Font file manifest

| File | Family | Style | Weight | Size |
|---|---|---|---|---|
| `fraunces-var.woff2` | Fraunces | normal | 100–900 (variable, opsz 9–144) | 66 KB |
| `fraunces-var-italic.woff2` | Fraunces | italic | 100–900 (variable, opsz 9–144) | 80 KB |
| `newsreader-var.woff2` | Newsreader | normal | 200–800 (variable, opsz 6–72) | 129 KB |
| `newsreader-var-italic.woff2` | Newsreader | italic | 200–800 (variable, opsz 6–72) | 143 KB |
| `eb-garamond-var.woff2` | EB Garamond | normal | 400–800 (variable) | 43 KB |
| `eb-garamond-var-italic.woff2` | EB Garamond | italic | 400–800 (variable) | 47 KB |
| `instrument-serif-400.woff2` | Instrument Serif | normal | 400 (static) | 21 KB |
| `instrument-serif-400-italic.woff2` | Instrument Serif | italic | 400 (static) | 22 KB |
| `libre-caslon-display-400.woff2` | Libre Caslon Display | normal | 400 (static) | 24 KB |
| `space-grotesk-var.woff2` | Space Grotesk | normal | 300–700 (variable) | 22 KB |
| `archivo-var.woff2` | Archivo | normal | 100–900 (variable, wdth 62–125%) | 88 KB |
| `archivo-var-italic.woff2` | Archivo | italic | 100–900 (variable, wdth 62–125%) | 99 KB |
| `syne-var.woff2` | Syne | normal | 400–800 (variable) | 34 KB |
| `unbounded-var.woff2` | Unbounded | normal | 200–900 (variable) | 50 KB |
| `bricolage-grotesque-var.woff2` | Bricolage Grotesque | normal | 200–800 (variable, opsz 12–96) | 75 KB |
| `manrope-var.woff2` | Manrope | normal | 200–800 (variable) | 24 KB |
| `work-sans-var.woff2` | Work Sans | normal | 100–900 (variable) | 49 KB |
| `work-sans-var-italic.woff2` | Work Sans | italic | 100–900 (variable) | 47 KB |
| `ibm-plex-mono-400.woff2` | IBM Plex Mono | normal | 400 (static) | 14 KB |
| `ibm-plex-mono-500.woff2` | IBM Plex Mono | normal | 500 (static) | 15 KB |
| `space-mono-400.woff2` | Space Mono | normal | 400 (static) | 16 KB |
| `space-mono-700.woff2` | Space Mono | normal | 700 (static) | 16 KB |
| `jetbrains-mono-var.woff2` | JetBrains Mono | normal | 100–800 (variable) | 39 KB |
| `jetbrains-mono-var-italic.woff2` | JetBrains Mono | italic | 100–800 (variable) | 42 KB |

**Result: 15/15 requested families succeeded. 24 files total. Nothing skipped.**

---

## Image assets table

All 21 files verified as real, non-empty webp images (`file` confirms "Web/P image" for all; sizes below via `du`). Source: `https://tpengdesign.com/framed/<slug>-<width>.webp`. Path pattern for reference in a two-levels-deep stylesheet/component: `../../assets/<slug>-800.webp`.

| Slug | 400w | 800w | 1200w |
|---|---|---|---|
| willo | `../../assets/willo-400.webp` (9.4 KB) | `../../assets/willo-800.webp` (24.7 KB) | `../../assets/willo-1200.webp` (42.4 KB) |
| bmw | `../../assets/bmw-400.webp` (10.4 KB) | `../../assets/bmw-800.webp` (29.2 KB) | `../../assets/bmw-1200.webp` (52.4 KB) |
| allstate | `../../assets/allstate-400.webp` (8.1 KB) | `../../assets/allstate-800.webp` (23.6 KB) | `../../assets/allstate-1200.webp` (42.6 KB) |
| hearinglife | `../../assets/hearinglife-400.webp` (8.0 KB) | `../../assets/hearinglife-800.webp` (22.9 KB) | `../../assets/hearinglife-1200.webp` (44.5 KB) |
| cyberus | `../../assets/cyberus-400.webp` (4.6 KB †) | `../../assets/cyberus-800.webp` (11.5 KB) | `../../assets/cyberus-1200.webp` (20.2 KB) |
| jotted | `../../assets/jotted-400.webp` (4.0 KB †) | `../../assets/jotted-800.webp` (9.9 KB) | `../../assets/jotted-1200.webp` (18.6 KB) |
| soomoo | `../../assets/soomoo-400.webp` (3.9 KB †) | `../../assets/soomoo-800.webp` (9.7 KB) | `../../assets/soomoo-1200.webp` (18.0 KB) |

† These three -400 variants are under the 5 KB target but were individually verified with `file`/`du` as complete, valid webp images — not truncated downloads. They're simply small because the source art (flat-color logo marks for Cyberus/Jotted/soomoo) compresses much smaller than the photographic covers for Willo/BMW/Allstate/HearingLife. No 404s occurred on any of the 21 requested image variants.

Recommended `srcset` pattern (mirrors the live site):
```html
<img
  src="../../assets/willo-800.webp"
  srcset="../../assets/willo-400.webp 400w, ../../assets/willo-800.webp 800w, ../../assets/willo-1200.webp 1200w"
  sizes="(min-width: 768px) 20vw, 80vw"
  alt="Willo · Brand Identity · Packaging"
/>
```