Собственные шрифты и оформление

Что охватывает руководство

Как самостоятельно размещать файлы .ttf, .otf или .woff2 без Google Fonts и установленных системных шрифтов.
Как загружать эти шрифты в dock.html или featured.html с помощью параметров URL или пользовательского CSS в OBS.
Какие переменные CSS меняют размер текста и макет на обеих страницах.
Быстрые альтернативы для тех, кто предпочитает Google Fonts или установленные системные шрифты.

Сообщение оверлея featured.html шрифтом Pacifico с аватаром и именем — Тот же `featured.html` оверлей с `&googlefont=Pacifico` применён — собственные шрифты работают так же через `@font-face`.

1) Разместите файлы шрифтов

Нужна прямая HTTPS-ссылка на файл шрифта. Выберите хостинг, разрешающий прямые ссылки и CORS, чтобы браузер внутри OBS или приложения мог загрузить файл.

Быстрые варианты: catbox.moe, 0x0.st, file.io (временное хранение).
Долговременные варианты: GitHub Pages, Cloudflare Pages, Netlify, собственный веб-сервер.
Размещайте только шрифты, лицензия которых разрешает распространение. По возможности выбирайте WOFF2: эти файлы меньше и загружаются быстрее TTF/OTF.

2) Подготовьте CSS

Объявите шрифт с помощью @font-face и укажите путь к размещённому файлу, затем назначьте его оверлею через --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;
}

Нужны несколько шрифтов для армянского, русского и латиницы? Объявите каждый через font-face и перечислите их в --font-family например 'FontA', 'FontB', 'FontC', sans-serif. Если символа нет, браузер автоматически перейдёт к следующему шрифту.

3) Примените его к dock.html или featured.html

Источник «Браузер» OBS: Откройте URL dock/featured в источнике «Браузер» OBS и вставьте приведённый выше блок CSS в поле «Пользовательский CSS».
Параметр URL (CSS на сервере): Загрузите CSS на тот же сервер, что и шрифты, затем добавьте &css=https://your-site.example/my-font.css к URL страницы:
```
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
```
Параметр URL со встроенным CSS: Для быстрой проверки можно передать CSS напрямую через &css= или закодировать его в base64 через &b64css= (обе страницы поддерживают эти параметры).
Быстрое переключение шрифтов: &font=YourInstalledFont использует имя системного шрифта, а &googlefont=Noto+Sans+Armenian,Noto+Sans загружает Google Fonts, если вы не хотите размещать шрифты самостоятельно.

Эти параметры одинаково работают в расширении Chrome, приложении Electron и на размещённом сайте, поскольку все они загружают одни и те же dock.html/featured.html файлы.

4) Настройте текст оверлея

Основные переменные типографики, используемые обеими страницами:

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

Дополнительно для док-панели: --stylized-emoji, --stylized-img, --text-stroke-width, --text-shadow, а также цвета строк (--highlight-base, --highlight-base2, а также compact варианты).

Настройка макета выделенного сообщения: измените --comment-width, --comment-padding, --comment-area-bottom, и --comment-area-height для перемещения нижней плашки без изменения HTML.

Сочетайте изменения CSS с существующими параметрами URL, например &scale, &compact, или &hidesource если нужно изменить макет док-панели.

5) Устранение неполадок