Fuentes propias y estilos - Social Stream Ninja

Qué cubre esta guía

Cómo alojar tus propios archivos .ttf, .otf o .woff2 (sin necesitar fuentes de Google ni del sistema).
Cómo cargar esas fuentes en dock.html o featured.html mediante parámetros de URL o CSS personalizado de OBS.
Qué variables CSS ajustan el tamaño y el diseño del texto en ambas páginas.
Alternativas rápidas si prefieres seguir usando Google Fonts o fuentes del sistema instaladas.

Los mismos featured.html superposición con &googlefont=Pacifico aplicado; las fuentes propias funcionan de la misma forma mediante @font-face.

1) Aloja tus archivos de fuentes

Necesitas un enlace HTTPS directo al archivo de fuente. Elige un alojamiento que permita enlaces directos/CORS para que el navegador de OBS o de la aplicación pueda descargarlo.

Opciones rápidas: catbox.moe, 0x0.st, file.io (temporal).
Opciones duraderas: GitHub Pages, Cloudflare Pages, Netlify, tu propio servidor web.
Aloja solo fuentes cuya licencia permita redistribuirlas. Cuando están disponibles, los archivos WOFF2 son más pequeños y cargan más rápido que TTF/OTF.

2) Crea el CSS

Define la fuente con @font-face y apúntala a tu archivo alojado; luego configura la superposición para utilizarla mediante --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;
}

¿Necesitas varias fuentes (para armenio + ruso + caracteres latinos)? Declara cada font-face y enuméralas en --font-family como 'FontA', 'FontB', 'FontC', sans-serif. El navegador utilizará automáticamente una alternativa si falta un carácter.

3) Aplícalo a dock.html o featured.html

Fuente de navegador de OBS: Abre tu URL de dock/featured en OBS > Fuente de navegador > CSS personalizado y pega el bloque CSS anterior.

Parámetro de URL (CSS alojado): Sube el CSS al mismo alojamiento que tus fuentes y luego añade &css=https://your-site.example/my-font.css a la URL de la página:

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

Parámetro de URL con CSS incluido: Para pruebas rápidas, puedes pasar CSS directamente con &css= o codifícalo en base64 con &b64css= (ambas páginas los admiten).
Cambios rápidos de fuente: &font=YourInstalledFont utiliza un nombre de fuente del sistema, mientras que &googlefont=Noto+Sans+Armenian,Noto+Sans carga Google Fonts si prefieres no alojar tus propias fuentes.

Estas opciones funcionan igual en la extensión de Chrome, la aplicación Electron y el sitio alojado porque todos cargan los mismos dock.html/featured.html archivos.

4) Ajusta el texto de la superposición

Variables tipográficas principales utilizadas por ambas páginas:

: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;
}

Opciones adicionales solo para el panel: --stylized-emoji, --stylized-img, --text-stroke-width, --text-shadow, y colores de filas (--highlight-base, --highlight-base2, además de compact variantes).

Ajustes de diseño de mensajes destacados: ajusta --comment-width, --comment-padding, --comment-area-bottom, y --comment-area-height para cambiar la posición del bloque del tercio inferior sin editar el HTML.

Combina los cambios de CSS con opciones de URL existentes como &scale, &compact, o &hidesource cuando necesites ajustar el diseño del panel.

5) Solución de problemas