Ao criar um aplicativo da web, incluir sua fonte preferida é como a cereja do bolo. As fontes melhoram o texto, tornam o site mais atraente e proporcionam uma melhor experiência ao usuário. Designers e desenvolvedores amam e odeiam algumas fontes, e usar a fonte padrão pode limitar sua criatividade. Adicionar fontes personalizadas dá aos desenvolvedores a liberdade de adicionar uma fonte externa aos seus aplicativos.

Pré-requisitos

Neste tutorial, recomendo fortemente que você tenha conhecimento básico de Tailwind CSS.

Presumo que o leitor esteja familiarizado com Tailwind CSS e como integrar o Tailwind em um aplicativo. Se você é novo no Tailwind, pode verificar a documentação oficial para obter instruções sobre como instalá-lo.

O que é uma fonte personalizada?

Fontes personalizadas são fontes que não estão disponíveis para uso por padrão. Fontes personalizadas não existem em seu sistema e não estão prontamente disponíveis quando necessário. Eles incluem fontes que você compra, obtém on-line, cria você mesmo ou fontes de marca especial que sua empresa usa. Um exemplo popular de fonte personalizada é a fonte do Google.

Adicionando fontes personalizadas ao seu projeto

Quando você instala o Tailwind em seu projeto, ele adiciona um arquivo chamado tailwind.config. Dentro do arquivo tailwind.config é onde adicionamos fontes personalizadas, cores, modelos de layout de grade, tamanhos de fonte, etc. Para adicionar fontes personalizadas, coloque as propriedades personalizadas entre o objeto estendido. Veja abaixo como fica o arquivo tailwind.config:

/* tailwind.config file */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: { },
    },
  },
  plugins: [],
};

Para adicionar uma fonte personalizada, usarei o Google Fonts. Acesse o site de fontes do Google, clique em Selecionar estilos e selecione sua fonte preferida. Para este tutorial, usarei esta fonte Rubik. Veja a representação pictórica do site google-font abaixo, com números circulados como guia:

Para anexar o link do Google ao seu arquivo HTML, siga as seguintes etapas:

• Copie o link do Google.

• Vá para o arquivo index.html.

• Encontre a tag head e cole o link do Google Fonts dentro dela.
  

Usando fontes personalizadas

Após colar as fontes Rubik dentro do arquivo index.html, a fonte Rubik deverá estar disponível em seu projeto, mas você não pode usá-la ainda.

Para usá-lo:

Vá para o arquivo tailwind.config.

Adicione o fontFamily dentro do objeto de extensão.

Dentro da família de fontes, darei um nome à fonte, neste caso, o nome é rub. Pode ter qualquer nome. Abra um colchete, adicione o nome da fonte ("Rubik") e uma fonte de backup.

/* tailwind.config file */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      fontFamily: {
        'rub': ["Rubik", "sans-serif"],
      },
    },
  },
  plugins: [],
};

Tailwind reconhece a fonte do Rubik, mas eu não a coloquei em uso. Vá para o arquivo ou componente no qual deseja usar a fonte e adicione a fonte de Rubik aos seus atributos class=''/className=''. Para aplicar a fonte personalizada ao seu projeto, use rub, não Rubik. Veja o exemplo abaixo:

// the file/component 

import React from 'react'

function CustomFonts() {
  return (
    

        

            
            
Default Font
            
Hello My name is Emeka and I enjoy creating things that     
            live on the internet. I also write technical articles.
        
        

            
            
Custom Font(Rubik Font)
            
Hello My name is Emeka and I enjoy         
            creating things that live on the internet. I also write             
            technical articles.
        
    
  )
}

export default CustomFonts

Usando fontes baixadas localmente

Para usar fontes baixadas localmente, escolherei um site aleatório. Você pode experimentar qualquer site de sua escolha. Acesse o site dafont, procure uma fonte na barra de pesquisa e baixe-a para o seu computador local. Veja a representação pictórica do site dafont abaixo, com números circulados como guia:

Extraia o arquivo zip (eu uso o WinRAR para extrair), copie o arquivo extraído e cole-o em uma pasta do seu projeto. Veja o exemplo abaixo:

A próxima etapa é navegar até o arquivo /index.css e inserir @font-face para trazer a fonte personalizada para o projeto. Usarei ADELIA para a família de fontes e src: para especificar onde a fonte está disponível.

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

@font-face {
    font-family: 'ADELIA';
    src: url('./fonts/ADELIA.ttf');
}

Para integrar a fonte Rubik, navegue até o arquivo tailwind.config e siga as seguintes etapas:

• Adicione um nome de classe de utilitário personalizado.

• Abrir um colchete

• Insira 'ADELIA' e 'cursiva' como fonte de backup.

Aqui está um exemplo:

/* tailwind.config file */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      fontFamily: {
        'rub': ["Rubik", "sans-serif"],
        'adelia': ['ADELIA', 'cursive']
      },
    },
  },
  plugins: [],
};

Agora podemos usar a fonte em nosso projeto:

// the file/component 

import React from 'react'

function CustomFonts() {
  return (
    

        

            
            
Default font
            
Hello My name is Emeka and I enjoy creating things that     
            live on the internet. I also write technical articles.
        
        

            
            
Custom Font(Rubik Font)
            
Hello My name is Emeka and I enjoy         
            creating things that live on the internet. I also write             
            technical articles.
        
    
  )
}

export default CustomFonts

Conclusão

Você pode usar a fonte personalizada em qualquer componente ou arquivo. Não há limitações para um arquivo ou componente específico; você pode usá-lo em vários componentes ou arquivos em todo o seu projeto. Além disso, você pode adicionar mais de uma fonte personalizada ao arquivo de configuração. Espero que o artigo tenha sido útil. Curta, comente e compartilhe para que outras pessoas possam aprender. Obrigada.