Adicionar uma fonte personalizada ao meu tema através do repositório de assets

[Joart]

Olá,
Estou tentando adicionar uma fonte personalizada ao meu tema, mas não funciona… Certamente fiz algo errado, mas não consigo encontrar onde.

• Estou desenvolvendo meu próprio tema que instalei via github.
• No repositório de assets, fiz o upload das minhas fontes que não são do Google Fonts:

• No about.json, importei os arquivos:

• No meu repositório scss, criei minhas famílias de fontes:

Tentei adicionar: format(‘woff2’), mas também não funcionou.

• E então:

Bem, não funciona… Alguma ideia?

[pfaffman (Jay Pfaffman)]

Não tenho certeza qual pode ser o problema. Eu daria uma olhada em Incluir ativos (por exemplo, imagens, fontes) em temas e componentes. Desculpe se isso não for útil.

[southpaw]

Olá @Joart,

Tenho certeza de que estou simplificando demais, mas notei que no seu trecho de about.json, o caminho para as fontes aponta para uma pasta assets, mas no seu CSS, o caminho aponta para uma pasta fonts. Você tem certeza de que o caminho de origem do CSS está correto?

[awesomerobot (Kris)]

@southpaw

Você tem certeza de que o caminho de origem do CSS está correto?

Essa é uma boa observação, mas você não quer usar o caminho no seu CSS assim, você deve referenciar os arquivos usando o nome do ativo como uma variável:

@font-face {
   font-family: supply-light;
   src: url($supply-light);
}

Isso é abordado em Include assets (e.g. images, fonts) in themes and components

[Joart]

Bem, eu tentei, mas não funcionou

[pfaffman (Jay Pfaffman)]

É difícil adivinhar o motivo. Você pode colocar seu tema no GitHub e vinculá-lo ou postar seu código aqui.

Você seguiu o exemplo fornecido por @awesomerobot?

[southpaw]

Olá @Joart,

Brinquei um pouco com isso em uma instância do Discourse bem nova e tive alguns problemas com as primeiras fontes que tentei. Eu as converti para .woff2 usando um conversor online gratuito e acho que talvez ele não tenha feito um bom trabalho.

Quando tentei com uma fonte .otf e novamente com outra fonte .woff2 convertida por um conversor mais confiável, consegui adicionar a fonte personalizada usando os passos no guia que @pfaffman e @awesomerobot vincularam.

Na verdade, levou apenas dois passos - fazer o upload do arquivo usando o modal Adicionar Upload e adicionar apenas as linhas @font-face e body do SCSS de exemplo ao tema ou componente.

Tenho certeza de que se você puder nos dar mais detalhes e compartilhar seu código e as fontes, poderemos ajudá-lo a resolver isso.

[Joart]

Ah sim, obrigado! Tentei com o formato ttf e funcionou!