Add custom fonts: upload WOFF2/WOFF/TTF/OTF files and pick them on the Design tab

Fonts become a file kind of their own (sniffed from the bytes like images,
served inline from /media), and the theme gets custom_font and
custom_heading_font: a chosen file is declared as @font-face and put first
in the stack, the built-in Font / Heading font choice behind it as the
fallback, so there is no "custom" enum value and no invalid state. The
pickers are plain selects with an upload input, no script. Fonts uploaded
before this are reclassified by the migration.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A

2 files changed, 20 insertions, 1 deletions

diff --git a/internal/web/templates/dashboard/design.html b/internal/web/templates/dashboard/design.html
index 5fd3fbe..5c79dbb 100644
--- a/internal/web/templates/dashboard/design.html
+++ b/internal/web/templates/dashboard/design.html
@@ -84,6 +84,12 @@
       <option value="large"{{if eq $t.FontSize "large"}} selected{{end}}>{{t "Large"}}</option>
     </select></label>
   </div>
+  <h3>{{t "Your own fonts"}}</h3>
+  <p class="muted small">{{t "A WOFF2, WOFF, TTF or OTF file from your library. It is used instead of the choice above, which readers see until it loads or if their browser cannot show it."}}</p>
+  <div class="row">
+    {{template "fontpick" (dict "name" "custom_font" "current" $t.CustomFont "fonts" .Data.fonts "names" .Data.imageNames "label" (t "Text font"))}}
+    {{template "fontpick" (dict "name" "custom_heading_font" "current" $t.CustomHeadingFont "fonts" .Data.fonts "names" .Data.imageNames "label" (t "Heading font") "hint" (t "None: headings use the text font, or the heading font above."))}}
+  </div>
 </div>
 
 <div class="card" id="header">
@@ -273,7 +279,7 @@
 
 <details class="help reset">
   <summary>{{t "Reset to defaults"}}</summary>
-  <p>{{t "Puts every colour, font and layout option back to how a new blog starts and forgets the chosen images (they stay in your library)."}}</p>
+  <p>{{t "Puts every colour, font and layout option back to how a new blog starts and forgets the chosen images and fonts (they stay in your library)."}}</p>
   <form method="post" action="/b/{{$sub}}/design/reset">
     <input type="hidden" name="_csrf" value="{{.CSRF}}">
     <button type="submit" class="danger">{{t "Reset everything"}}</button>
diff --git a/internal/web/templates/partials/fontpick.html b/internal/web/templates/partials/fontpick.html
new file mode 100644
index 0000000..35820a2
--- /dev/null
+++ b/internal/web/templates/partials/fontpick.html
@@ -0,0 +1,13 @@
+{{/* One font field of the design page: a select of the recent library fonts
+     (plus a chosen one older than those, named through .names) and an upload
+     input. No library panel behind it — a blog has a handful of fonts — and
+     no script: the select is what the form sends (see pickFile). */}}
+{{define "fontpick"}}{{$cur := .current}}{{$listed := false}}{{range .fonts}}{{if eq .ID.String $cur}}{{$listed = true}}{{end}}{{end}}<div class="fontpick">
+  <label>{{.label}}<br><select name="{{.name}}">
+    <option value="none"{{if not $cur}} selected{{end}}>{{t "None"}}</option>
+    {{range .fonts}}<option value="{{.ID}}"{{if eq .ID.String $cur}} selected{{end}}>{{.Filename}}</option>{{end}}
+    {{if and $cur (not $listed)}}<option value="{{$cur}}" selected>{{with index .names $cur}}{{.}}{{else}}{{t "Current font"}}{{end}}</option>{{end}}
+  </select></label>
+  <label class="upload">{{t "…or upload a new one"}}<br><input type="file" name="{{.name}}_file" accept=".woff2,.woff,.ttf,.otf,font/woff2,font/woff,font/ttf,font/otf"></label>
+  {{if .hint}}<p class="muted small">{{.hint}}</p>{{end}}
+</div>{{end}}