Tailwind: Adicionando fontes customizadas

O Tailwind vem com algumas fontes padrão no momento da instalação e elas estão ativas por padrão em toda a página. Mas como o Tailwind trabalha com uma folha de estilos gerada, a customização da fonte fica um pouco diferente do que a de costume.

Da mesma maneira que em um CSS comum, nós podemos trabalhar com fontes externas (tag link dentro da head da página) e fontes locais (utilizando @font-face). Independente da escolha de trabalhar com fontes externas ou locais, existem pelo menos 2 maneiras oficiais de trabalhar com fontes. Vamos ver quais são.

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.

Página da Google Fonts na fonte Roboto. Diversas variações de peso e estilos (itálico e regular) estão sendo mostrados em ordem sequencial (peso 100 ~ 900).

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.

Menu lateral da página da Google Fonts com as diferentes variações da fonte selecionadas. Abaixo a opção link foi selecionada e código html está sendo mostrado. São 3 tags link geradas pelo site.

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="public/styles.css">
</head>

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.

Árvore de arquivos do projeto contendo a seguinte estrutura: node_modules; public>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.

@tailwind base;
@tailwind components;
@font-face {
    font-family: "Icones";
    src: url("fonts/icones.ttf") format("ttf");
}
@tailwind utilities;

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.

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        'roboto': ['Roboto', 'sans-serif'],
        'icones': ['Icones']
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

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.

<body class="p-4">
    <h1 class="text-3xl font-bold mb-2">Tailwind CSS <span class="font-icones">(●'◡'●)</span></h1>
    <p class="mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus dignissimos velit suscipit inventore dolorem cum, a accusamus minima impedit ipsam dolore rem voluptatem ad praesentium explicabo mollitia earum? Temporibus, inventore.</p>
    <p class="mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad sequi obcaecati tempora, eos asperiores officia dicta quia, accusamus consequatur nobis, distinctio sint magnam quos omnis possimus odit accusantium! Illum, maiores.</p>
    <h2 class="text-2xl font-bold mb-2">Fontes</h2>
    <p>Roboto</p>
</body>

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:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    fontFamily: {
      'sans': ['Roboto', 'sans-serif']
    },
    extend: {
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

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:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    fontFamily: {
      'roboto': ['Roboto', 'sans-serif']
    },
    extend: {
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

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.