Fontes e estilos auto-hospedados - Social Stream Ninja

O que este guia cobre

Como hospedar arquivos .ttf, .otf ou .woff2 por conta própria, sem depender de fontes do Google ou do sistema.
Como carregar essas fontes em dock.html ou featured.html usando parâmetros de URL ou CSS personalizado do OBS.
Quais variáveis CSS ajustam tamanho do texto e layout nas duas páginas.
Alternativas rápidas se quiser continuar usando Google Fonts ou fontes instaladas no sistema.

O mesmo featured.html overlay com &googlefont=Pacifico aplicado; fontes auto-hospedadas funcionam da mesma forma por @font-face.

1) Hospede seus arquivos de fonte

Você precisa de um link HTTPS direto para o arquivo de fonte. Escolha um host que permita carregamento externo/CORS para o navegador do OBS ou aplicativo buscar o arquivo.

Opções rápidas: catbox.moe, 0x0.st, file.io, com curta duração.
Opções duradouras: GitHub Pages, Cloudflare Pages, Netlify ou seu próprio servidor web.
Hospede apenas fontes cuja licença permita redistribuição. Arquivos WOFF2 são menores e carregam mais rápido que TTF/OTF quando disponíveis.

2) Crie o CSS

Defina a fonte com @font-face e aponte para seu arquivo hospedado. Depois configure o overlay para usá-la com --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;
}

Precisa de várias fontes, por exemplo armênio, russo e latim? Declare cada font-face e liste em --font-family como 'FontA', 'FontB', 'FontC', sans-serif. O navegador usará uma alternativa automaticamente se faltar um caractere.

3) Aplique a dock.html ou featured.html

Fonte de navegador do OBS: Abra sua URL de dock ou destaque em OBS > Fonte de navegador > CSS personalizado e cole o bloco CSS acima.

Parâmetro de URL para CSS hospedado: Envie o CSS ao mesmo host das fontes e acrescente &css=https://your-site.example/my-font.css à URL da 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 direto na URL: Para testes rápidos, você pode passar CSS diretamente com &css= ou codifique em base64 com &b64css= ; as duas páginas aceitam essas opções.
Trocas rápidas de fonte: &font=YourInstalledFont usa o nome de uma fonte do sistema, enquanto &googlefont=Noto+Sans+Armenian,Noto+Sans carrega Google Fonts se preferir não hospedar por conta própria.

Essas opções funcionam igual na extensão do Chrome, no aplicativo Electron e no site hospedado, pois todos carregam os mesmos arquivos dock.html/featured.html .

4) Ajuste o texto do overlay

Variáveis principais de tipografia usadas nas duas 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;
}

Extras só do dock: --stylized-emoji, --stylized-img, --text-stroke-width, --text-shadow, e cores de linhas (--highlight-base, --highlight-base2, além de compact variantes).

Ajustes do layout de destaque: ajuste --comment-width, --comment-padding, --comment-area-bottom, e --comment-area-height para reposicionar o bloco inferior sem editar o HTML.

Combine alterações de CSS com opções de URL existentes, como &scale, &compact, ou &hidesource quando precisar ajustar o layout no dock.

5) Solução de problemas