Google Fonts

Componente de tema
,
1
:discourse2: Summary Google Fonts is a simple theme component that allows you to add a font from Google Fonts without writing any CSS.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-google-font-component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Features

This component allows you to set the main site font, and optionally separate fonts for headlines and monospaced text (code blocks). You can also choose a font weight in each case, and increase the font size.

Behind the scenes this sets up a little bit of CSS along with Google’s font <link>. Note that this is relying on Google to serve the font files from https://fonts.googleapis.com/.

Settings

Name Description
fonts Add the name of the font(s) you want to use from fonts.google.com. Note that font names are CaSe SeNsiTivE!
body font The main font used throughout Discourse, must be included in “fonts” setting above
body font weight Font thickness in the range of 100-900. 400 is normal, 700 is bold
headline font Optional font for headlines, must be included in “fonts” setting above
headline font weight Font thickness in the range of 100-900. 400 is normal, 700 is bold
monospaced font Optional font for code blocks, must be included in “fonts” setting above.
monospaced font weight Font thickness in the range of 100-900. 400 is normal, 700 is bold
normal font size Default font size for all users, adjusting this will adjust all font sizes proportionately
smaller font size Selectable in each user’s interface preferences
larger font size Selectable in each user’s interface preferences
largest font size Selectable in each user’s interface preferences

:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @awesomerobot 2025-03-14T15:46:34Z

Check documentPerform check on document:
50 curtidas
4

This Fantastic! Can this be installed Multiple Times to link to different themes by changing it’s Name in Advanced install?

5

I don’t see why not. We’ve installed the same theme twice, for example here on Meta to have both a light and dark version.

3 curtidas
6

Thanks. Forgot you can rename it to identify/link it to other themes.

1 curtida
7

Thank you. I love it. :grin:

3 curtidas
9

Thanks :heart: I really love it.

21

Acabei de descobrir que este componente não funciona para páginas /pub/ (publicadas). As fontes não estão sendo carregadas nessas páginas, resultando em uma fonte padrão semelhante a Times New Roman.

1 curtida
22

Também estou vendo fontes padrão, mas na página de ativação de conta https://yoursite.org/u/activate-account/...

23

Tentei e isso Ă© realmente um problema.

A página publicada tenta carregar a fonte do Google através do componente de tema:

image

O arquivo de fonte não está sendo carregado na página publicada, ele não recorre à variável font-family Arial, sans-serif e usa Times New Roman em vez disso.

Pode haver espaço para melhorias aqui, desde que as páginas publicadas possam acessar as modificações necessárias.

1 curtida
24

Para ser honesto, desde essa descoberta, eu defino minhas fontes em CSS personalizado. Funciona muito bem.

2 curtidas
29

Isso é incrível, obrigado a você e à sua equipe por desenvolverem um recurso tão conveniente ^^. Vou recomendá-lo a pessoas que conheço que usam o Discourse para construir comunidades de usuários.

33

Relatório rápido de bug: Acabei de notar que, quando defino o peso da fonte, o texto em negrito não aparece como negrito.

Testei isso com as fontes Work Sans e Zilla Slab. Mudei o peso da fonte do padrão (400) para 300. Quando fiz isso, o texto em negrito não apareceu em negrito. Redefini essa configuração e o texto em negrito reapareceu.

Defini para 400 e encerrei por hoje, mas queria avisar.

Obrigado pelo seu trabalho nisso!

34

Há alguma maneira de entrar um pouco mais nos detalhes? A fonte “Headline” está aparecendo com peso 900 por padrão com Headers dentro de Topics. Seria ótimo definir os padrões para cada um desses objetos Markdown.

1 curtida
36

Parece haver um bug com isso, pelo menos no meu fórum, se eu adicionar a fonte “Inter” com este componente, o seguinte acontece:

  • Comece a editar ou compor uma mensagem
  • Mude para outro aplicativo enquanto o editor estiver aberto
  • Volte, e o zoom estará completamente errado, como se estivesse muito ampliado
  • TambĂ©m haverá bugs com o Chat e com a rolagem agora

NĂŁo tenho certeza se acontece com outras fontes, mas acontece 100% das vezes se eu adicionar este componente a qualquer tema.

Este é um bug conhecido? Existe uma correção?

Obrigado.

2 curtidas
37

Já temos o Inter integrado, se você quiser alterar a Fonte base e a Fonte de títulos nas configurações do site do admin, não é necessário componente

2 curtidas
38

Qual versão do Discourse? Estou na 3.3 estável e não vejo Inter. Estou tendo os mesmos problemas que alguns dos usuários aqui com este componente.

Estou na 3.3 e quero usar Inter. Embora a fonte carregue, o texto NEGRITO nĂŁo fica em negrito.

39

Você precisará atualizar para a versão 3.4 para a opção Inter integrada

2 curtidas
40

Acabei de mesclar um refatoramento deste componente que se alinha melhor com as atualizações do Google Font — isso deve corrigir alguns problemas que as pessoas estavam tendo com diferentes pesos não aparecendo.

Observe que a formatação da configuração mudou ligeiramente para que os pesos não possam mais ser incluídos na configuração do nome da fonte como Roboto:300,300i,500, e isso teria que ser atualizado para um simples Roboto… mas deve migrar automaticamente na atualização.

2 curtidas