Polices auto-hébergées et styles

Contenu de ce guide

Comment héberger vous-même des fichiers .ttf, .otf ou .woff2, sans police Google ni système.
Comment charger ces polices dans dock.html ou featured.html à l’aide de paramètres d’URL ou du CSS personnalisé d’OBS.
Quelles variables CSS règlent la taille du texte et la disposition sur les deux pages.
Solutions rapides si vous préférez conserver Google Fonts ou les polices système installées.

Le même featured.html incrustation avec &googlefont=Pacifico appliqué ; les polices auto-hébergées fonctionnent de la même façon via @font-face.

1) Héberger vos fichiers de polices

Il vous faut un lien HTTPS direct vers le fichier de police. Choisissez un hébergement autorisant les liens externes et CORS pour que le navigateur intégré à OBS ou à l’application puisse le récupérer.

Options rapides : catbox.moe, 0x0.st, file.io (temporaire).
Solutions durables : GitHub Pages, Cloudflare Pages, Netlify ou votre propre serveur web.
N’hébergez que des polices que votre licence vous autorise à redistribuer. Les fichiers WOFF2 sont plus petits et se chargent plus vite que TTF/OTF lorsqu’ils sont disponibles.

2) Créer le CSS

Définissez la police avec @font-face et pointez vers votre fichier hébergé, puis indiquez à l’incrustation de l’utiliser via --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;
}

Besoin de plusieurs polices, par exemple pour l’arménien, le russe et le latin ? Déclarez chaque font-face et listez-les dans --font-family comme 'FontA', 'FontB', 'FontC', sans-serif. Le navigateur utilisera automatiquement une autre police si un glyphe manque.

3) L’appliquer à dock.html ou featured.html

Source navigateur OBS : Ouvrez votre URL de Dock/Featured dans OBS > Source navigateur > CSS personnalisé et collez le bloc CSS ci-dessus.

Paramètre d’URL (CSS hébergé) : Importez le CSS sur le même hébergement que vos polices, puis ajoutez &css=https://your-site.example/my-font.css à l’URL de la page :

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

Paramètre d’URL direct : Pour des essais rapides, vous pouvez passer directement le CSS avec &css= ou encodez-le en base64 avec &b64css= (les deux pages les prennent en charge).
Changer rapidement de police : &font=YourInstalledFont utilise un nom de police système, tandis que &googlefont=Noto+Sans+Armenian,Noto+Sans charge Google Fonts si vous préférez ne pas héberger les polices.

Ces options fonctionnent de la même manière dans l’extension Chrome, l’application Electron et le site hébergé, car tous chargent les mêmes dock.html/featured.html fichiers.

4) Ajuster le texte de l’incrustation

Variables typographiques principales utilisées par les deux pages :

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

Options propres au Dock : --stylized-emoji, --stylized-img, --text-stroke-width, --text-shadow, et les couleurs des lignes (--highlight-base, --highlight-base2, ainsi que compact variantes).

Réglages de disposition pour Featured : ajustez --comment-width, --comment-padding, --comment-area-bottom, et --comment-area-height pour repositionner le bandeau inférieur sans modifier le HTML.

Associez les modifications CSS aux options d’URL existantes, comme &scale, &compact, ou &hidesource si vous devez ajuster la disposition du Dock.

5) Dépannage