Mudar a fonte padrão do seu site

[Discourse]

Este guia explica como alterar a fonte padrão do seu site Discourse, seja para elementos específicos ou usando uma biblioteca de fontes diferente do Google Fonts.

Nível de usuário necessário: Administrador

Este guia só é necessário se você quiser integrar-se a uma biblioteca de fontes diferente do Google Fonts ou alterar a fonte de apenas alguns elementos do site. Se você estiver usando o Google Fonts e quiser alterar a fonte globalmente em seu site, experimente este componente de tema: Google Fonts.

Este guia cobrirá:

• Usando as configurações de fonte integradas
• Alterando a fonte do site com uma fonte personalizada
• Aplicando fontes diferentes a elementos específicos

Configurações de fonte integradas

O Discourse inclui um seletor de fontes integrado com uma seleção de fontes agrupadas. Esta é a maneira mais simples de alterar a fonte do seu site sem qualquer CSS personalizado.

Navegue até Admin > Appearance > Fonts (Administrador > Aparência > Fontes) para acessar a página de configurações de fonte. A partir daqui, você pode definir:

• Base font (Fonte base) — usada para a maior parte do texto no site (padrão: Inter)
• Heading font (Fonte de título) — usada para títulos (padrão: Inter)
• Default text size (Tamanho de texto padrão) — o tamanho de texto padrão para todos os usuários

Essas configurações usam as propriedades personalizadas de CSS --font-family e --heading-font-family nos bastidores, que os temas também podem substituir.

Alterando a fonte com uma fonte personalizada

Se você quiser usar uma fonte não incluída na lista integrada (por exemplo, do Google Fonts ou de um arquivo de fonte auto-hospedado), você pode fazer isso por meio de um componente de tema.

1. Crie um novo componente de tema

Navegue até Admin > Appearance > Themes & Components > Install > Create New (Administrador > Aparência > Temas e Componentes > Instalar > Criar Novo). Escolha um nome e selecione “Component”.

2. Editar CSS/HTML

Clique no botão “Edit CSS/HTML” (Editar CSS/HTML).

3. Adicione a fonte usando o Google Fonts

Se você quiser usar uma fonte da web do Google, adicione o seguinte à sua guia Common > CSS (Comum > CSS):

@import url(https://fonts.googleapis.com/css?family=Oswald);

html {
    --font-family: 'Oswald', sans-serif;
    --heading-font-family: 'Oswald', sans-serif;
}

Certifique-se de que a linha @import url esteja colocada no topo da folha de estilo.

Neste exemplo, Oswald é o nome da fonte.

Se houver um problema com o método @import url, você pode usar alternativamente o método <link> inserindo a linha apropriada dentro da guia Common > /head do seu componente de tema:

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

Este método alterará a fonte do site globalmente.

4. Aplique fontes a elementos específicos
   Você também pode alterar a fonte do site apenas para alguns elementos.

Para alterar a fonte apenas para alguns elementos, como a barra de navegação ou títulos de tópicos, adicione:

@import url('https://fonts.googleapis.com/css?family=Oswald:200,300');

.navigation-container, .link-top-line {
    font-family: 'Oswald', sans-serif;
}

Alternativamente, para alterar a fonte de uma categoria específica, use:

body.category-CATEGORY-NAME {
    font-family: 'YOUR-NEW-FONT';
}

6. Adicione o novo componente aos temas principais

Certifique-se de adicionar o componente de tema recém-criado a todos os temas principais que os usuários podem selecionar: