Integrando Fontes Personalizadas em um Projeto Vue 3 CLI com TailwindCSS

Personalizar fontes é uma ótima maneira de melhorar o apelo visual e a singularidade do seu aplicativo Vue 3. Vamos mergulhar em como instalar fontes personalizadas como a "Inter" em um projeto Vue 3 CLI que usa TailwindCSS.

Baixe os Arquivos de Fonte

Primeiro, baixe os arquivos de fonte "Inter". Você pode obtê-los no Google Fonts ou diretamente no site da fonte Inter. Certifique-se de ter os arquivos de fonte nos formatos .woff e .woff2 para uma melhor compressão e tempos de carregamento mais rápidos. Outros formatos comuns são ttf, otf, eot e svg.

Adicione a Fonte ao Seu Projeto

Uma vez baixados, coloque os arquivos de fonte no diretório src/assets/fonts do seu projeto Vue 3. Criar uma pasta fonts dedicada ajuda a manter seus assets organizados.

Escolha o Formato de Fonte Correto

Ao configurar sua @font-face, é vital especificar o formato correto para seus arquivos de fonte:

Arquivos .woff: Use format('woff')
Arquivos .woff2: Use format('woff2')
Arquivos .ttf: Use format('truetype')
Arquivos .otf: Use format('opentype')
Arquivos .eot: Use format('embedded-opentype')
Arquivos .svg: Use format('svg')

Isso garante que os navegadores reconheçam e carreguem o tipo de fonte apropriado.

Defina Font-Face no TailwindCSS

O TailwindCSS permite que você coloque suas regras @font-face diretamente no arquivo principal tailwind.css. Veja como você pode definir a fonte "Inter" dentro da diretiva @layer base:

css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: 'Inter';
    src: url('@/assets/fonts/Inter-Regular.woff2') format('woff2'), url('@/assets/fonts/Inter-Regular.woff')
        format('woff');
    font-weight: 400;
    font-style: normal;
  }
  // ... Inclua todos os pesos e estilos de fonte de que você precisa
}

O @/ é um alias para o seu diretório src e o Vite (ferramenta de construção do Vue 3) resolverá isso corretamente.

Você também pode incluir font-display: swap para garantir que o texto permaneça visível durante o carregamento da fonte.

Atualize a Configuração do Tailwind

O TailwindCSS usa um arquivo de configuração para personalizar seus padrões. Estenda seu tailwind.config.js para incluir a fonte "Inter":

javascript

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
};

Este código define "Inter" como a fonte sans-serif padrão para o seu projeto.

Use a Fonte em Seus Componentes

Agora, você pode usar a fonte em seus componentes Vue assim:

html

<template>
  <div class="font-sans">Isso está usando a fonte Inter.</div>
</template>

A classe font-sans agora corresponde à fonte "Inter", aplicando-a ao texto dentro da div.

Construa e Teste

Execute seu aplicativo Vue para ver as mudanças:

bash

npm run serve

Inspecione seu aplicativo para garantir que a fonte "Inter" esteja sendo aplicada. Você pode precisar limpar o cache do navegador ou realizar uma atualização forçada para ver a nova fonte.

Conclusão

Parabéns! Você integrou com sucesso uma fonte personalizada em seu projeto Vue 3 e TailwindCSS. Seguindo esses passos, você pode injetar mais personalidade em seu aplicativo com a fonte "Inter" ou qualquer outra fonte de sua escolha. Lembre-se de que a chave para uma integração bem-sucedida é a organização adequada de seus arquivos de fonte e a configuração correta em sua configuração do Tailwind.

Integrando Fontes Personalizadas em um Projeto Vue 3 CLI com TailwindCSS ​

Baixe os Arquivos de Fonte ​

Adicione a Fonte ao Seu Projeto ​

Escolha o Formato de Fonte Correto ​

Defina Font-Face no TailwindCSS ​

Atualize a Configuração do Tailwind ​

Use a Fonte em Seus Componentes ​

Construa e Teste ​

Conclusão ​