Власний хостинг шрифтів і оформлення

Що охоплює цей посібник

Як самостійно розмістити файли .ttf, .otf або .woff2 (шрифт Google або системний шрифт не потрібен).
Як завантажувати ці шрифти в 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 дока/вибраних повідомлень в OBS > Browser Source > Custom 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= або закодуйте його в 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) Усунення несправностей