Selbst gehostete Schriften & Gestaltung

Was dieser Leitfaden behandelt

Wie du .ttf-, .otf- oder .woff2-Dateien selbst hostest (keine Google- oder Systemschrift erforderlich).
Wie du diese Schriften in dock.html oder featured.html über URL-Parameter oder benutzerdefiniertes CSS in OBS.
Welche CSS-Variablen Textgröße und Layout auf beiden Seiten anpassen.
Schnelle Alternativen, wenn du Google Fonts oder installierte Systemschriften weiterverwenden möchtest.

Dieselben featured.html Overlay mit &googlefont=Pacifico angewendet – selbst gehostete Schriften funktionieren genauso über @font-face.

1) Schriftdateien hosten

Du benötigst einen direkten HTTPS-Link zur Schriftdatei. Wähle einen Host, der Hotlinking/CORS erlaubt, damit der Browser in OBS oder der App sie laden kann.

Schnelle Optionen: catbox.moe, 0x0.st, file.io (kurzlebig).
Dauerhafte Optionen: GitHub Pages, Cloudflare Pages, Netlify, dein eigener Webserver.
Hoste nur Schriften, deren Lizenz dir die Weiterverbreitung erlaubt. WOFF2-Dateien sind, sofern verfügbar, kleiner und laden schneller als TTF/OTF.

2) CSS erstellen

Definiere die Schrift mit @font-face und verweise auf deine gehostete Datei. Stelle das Overlay dann über --font-family.

@font-face {
  font-family: 'MyDockFont';
  src: url('https://your-site.example/fonts/MyDockFont.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
}

/* Optional second weight */
@font-face {
  font-family: 'MyDockFont';
  src: url('https://your-site.example/fonts/MyDockFont-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
}

:root {
  --font-family: 'MyDockFont', 'Segoe UI', 'Arial Unicode MS', sans-serif;
  --comment-font-size: 28px;
  --author-font-size: 24px;
  --message-line-height: 32px;
}

Brauchst du mehrere Schriften, etwa für Armenisch, Russisch und Latein? Definiere jede Schrift mit font-face und liste sie in --font-family wie 'FontA', 'FontB', 'FontC', sans-serif. Fehlt ein Zeichen, verwendet der Browser automatisch eine Ersatzschrift.

3) Auf dock.html oder featured.html anwenden

OBS-Browserquelle: Öffne deine Dock-/Featured-URL in OBS > Browserquelle > Benutzerdefiniertes CSS und füge den CSS-Block oben ein.

URL-Parameter (gehostetes CSS): Lade das CSS zum selben Host wie deine Schriften hoch und hänge dann &css=https://your-site.example/my-font.css an die Seiten-URL an:

https://socialstream.ninja/dock.html?session=YOURSESSION&css=https://your-site.example/my-font.css
https://socialstream.ninja/featured.html?session=YOURSESSION&css=https://your-site.example/my-font.css

Direkter URL-Parameter: Für schnelle Tests kannst du CSS direkt mit &css= oder kodiere es mit Base64 über &b64css= (beide Seiten unterstützen diese).
Schneller Schriftwechsel: &font=YourInstalledFont verwendet den Namen einer Systemschrift, während &googlefont=Noto+Sans+Armenian,Noto+Sans lädt Google Fonts, wenn du nicht selbst hosten möchtest.

Diese Optionen funktionieren in Chrome-Erweiterung, Electron-App und gehosteter Website gleich, weil alle dieselben dock.html/featured.html Dateien.

4) Overlay-Text anpassen

Zentrale Typografievariablen, die beide Seiten verwenden:

:root {
  --font-family: 'MyDockFont', 'FontB', sans-serif;
  --comment-font-size: 28px;  /* message text size */
  --author-font-size: 24px;   /* name text size */
  --comment-font-weight: 600; /* featured.html */
  --author-font-weight: 700;  /* featured.html */
  --message-font-weight: 500; /* dock.html */
  --name-font-weight: 700;    /* dock.html */
  --comment-color: #ffffff;
  --author-color: #ffe08a;
  --comment-bg-color: #161616;
  --author-bg-color: #202020;
}

Extras nur für das Dock: --stylized-emoji, --stylized-img, --text-stroke-width, --text-shadow, und Zeilenfarben (--highlight-base, --highlight-base2, sowie die compact Varianten).

Layoutanpassungen für hervorgehobene Nachrichten: passe --comment-width, --comment-padding, --comment-area-bottom, und --comment-area-height um den Bauchbindenblock ohne Änderung am HTML zu verschieben.

Kombiniere CSS-Änderungen mit bestehenden URL-Optionen wie &scale, &compact, oder &hidesource wenn du Layoutanpassungen im Dock benötigst.

5) Fehlerbehebung