Tailwind: Adicionando fontes customizadas

Para trabalhar com fontes customizadas é necessário ter o arquivo de folha de estilos inicial do projeto (o que contém todas as diretivas iniciais para build) e o arquivo de configuração tailwind.config.js.

Utilizando fontes externas ou locais

Como mencionado anteriormente, nós podemos trabalhar com fontes externas e locais. Mas qual opção escolher? A regra aqui é a mesma que trabalhar sem o Tailwind. Fontes externas dependem de serviços externos para funcionar e caso esse serviço não esteja funcionando no momento de carregamento da página, a fonte não será carregada. Fontes locais permitem o carregamento de fontes próprias, como por exemplo: ícones em fontes. Além também da vantagem da fonte ser carregada junto com a página sem depender de serviços externos.

Importando uma fonte externa

Vou utilizar como exemplo a fonte Roboto e os serviços da Google Fonts para importar um projeto, selecionando a família e quais os pesos quero utilizar no meu projeto.

Depois de selecionadas as variações, aparecerá um menu lateral à direita, teremos 2 opções de importação: link e @import. Vamos com a opção link. Temos 3 tags link geradas automaticamente.

Basta copiar estas tags e colar antes de importar o arquivo CSS gerado pelo Tailwind (public/styles.css).

Com isso a fonte está importada no projeto, mas ainda não é utilizada. Mais para frente veremos como usá-la.

Importando uma fonte local

Para este exemplo eu vou usar um arquivo de ícones em fonte chamado icones.ttf. Lembrando que funciona para qualquer tipo de fonte, não apenas ícones. Podemos baixar a fonte Roboto.ttf e importá-la da mesma maneira. Primeiro vou criar uma pasta fonts dentro da minha pasta src. E dentro jogar meu arquivo icones.ttf.

styles.css; src>fonts>icones.ttf; src>styles.css; index.html; package-lock.json; package.json; tailwind.config.js.">

O próximo passo é importar essa fonte utilizando @font-face, que já é nativo do CSS. Dentro do arquivo de folha de estilos inicial vamos adicionar a diretiva @font-face antes da diretiva de utilidades. Muito importante ser antes da diretiva de utilidades porque a fonte precisa ser importada antes de gerarmos as classes de utilidade.

Com isso a fonte está importada no projeto, mas ainda não é utilizada.

Utilizando as fontes importadas

Até agora nós vimos maneiras diferentes de importar fontes em um projeto, mas elas ainda não estão em uso. O próximo passo agora é mostrar essas fontes na nossa página.

Estendendo suas fontes

O Tailwind vem com 3 classes utilitárias para font-family por padrão: font-sans, font-serif e font-mono. A classe font-sans é a padrão. Caso você queira manter essas classes e adicionar suas próprias, você pode alterar o arquivo tailwind.config.js e adicionar em extend de theme o objeto fontFamily. Dentro de fontFamily adicionar o nome da nova família entre aspas simples e depois adicione à lista de fontes de fallback (fontes reservas caso a fonte primária não consiga ser importada) como em um CSS normal.

Agora basta rebuildar o arquivo base e depois utilizar as classes utilitárias font-roboto e font-icones. Você pode fazer o build utilizando a linha npx tailwindcss -i src/styles.css -o public/styles.css. Vale lembrar que a localização desses arquivos podem mudar de acordo com o seu projeto.

Substituindo com suas fontes

Caso você não queira usar as classes de utilidade padrões, você pode substituir pelas suas próprias. Existem duas maneiras de fazer isso. A primeira é sobrescrever a classe sans, por exemplo com as fontes customizadas:

Neste caso, as classes font-serif e font-mono não existirão, porque quando elas não são declaradas fora do extend elas não são geradas no momento do build. Mas a classe font-sans é sobrescrita e utilizada automaticamente.

A segunda maneira é criar uma nova classe utilitária e utilizar-la no HTML:

Neste caso as classes font-sans, font-serif e font-mono também deixarão de existir.

Conclusão

Neste artigo vimos como adicionar fontes customizadas em um projeto que usa Tailwind, desde as possibilidades de importação até o uso, entendendo quais são as configurações necessárias e impactos na configuração padrão do framework.