Descobrindo a fonte utilizada em um site e aplicando ela ao seu projeto Tailwind 4.0/Rails

Supondo que um belo dia você esteja navegando em sites por aí e, do nada, goste de uma fonte que está em um deles e deseje colocá-la também no seu site.

Seria um processo não muito dificultoso, o backender - sem saco para lidar com front - pergunta a IA, ela responde e todo mundo sai feliz. Só que o Tailwind passou por uma atualização de versão e agora, da versão 4.0 para frente, acabou, exterminou, extinguiu o tailwind.config.js (se quiser se aprofundar mais na questão digite 'CSS-first configuration' dentro desse link que eu passei).

Isso tem dado um nó na cabeça de muita gente. Especialmente porque muitas IAs foram 'alimentadas' com versões mais antigas do Tailwind, ou seja, as respostas que elas derem conterão alguma configuração no finado tailwind.config.js.

Mas não vamos arrancar os nossos cabelos, ok? As configurações que antes eram feitas no tailwind.config agora devem ser feitas diretamente no arquivo CSS. Em projetos Rails o arquivo fica bem aqui:

app > assets > tailwind > application.css

Dito isso, vamos começar do zero com o passo-a-passo da operação que eu me propus a realizar no título.

Descobrindo a fonte

Inventei de navegar por esse site aqui e achei a fonte linda. Como vou encontrá-la?

1. Aperte a tecla *F12 no seu teclado, ou clique com o botão direito do mouse em qualquer lugar do site e selecione a opção 'inspecionar'.

2. No DevTools vá no botão para inspecionar:

1. Ao inspecionar a fonte no site há duas formas de descobrir:

3.1 Ou passando o cursor por cima da fonte a aguardando a janela de inspeção da tag HTML abrir e informar qual é a fonte.

3.2 Ou clicando em cima do elemento e, no DevTools, indo a seção 'Styles' e procurando a font-family por lá.

Adquirindo os arquivos no Google Fonts

Agora que já sabemos qual é o nome da fonte empregada no site, vamos ao Google Fonts descolá-la para o nosso. No Google Fonts procure pelo nome da sua fonte.

Selecione o tamanho máximo que deseja e se deseja versão em itálico para a fonte ou não. Decidido isso clicamos em Get Font:

Depois vamos em Get embed code:

Selecione a opção link e depois clique em Copy code:

Aplicando a fonte ao seu projeto Rails

1 - Modificações no application.html.erb

Para aplicara a fonte no projeto Rails vamos até o arquivo application.html.erb que fica bem aqui:

app > views > layouts > application.html.erb

E nele, logo abaixo das metatags que ficam dentro da tag

vamos inserir as tags da fonte que copiamos:

<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=Crete+Round:ital@0;1&display=swap" rel="stylesheet">

Para além disso, vamos até o do nosso arquivo - aqui mesmo no application.html.erb - e vamos atribuir a ele a seguinte classe:

class="font-sans"

Vai ficar assim:

2 - Modificação no application.css

Agora vamos ao anteriormente falado application.css percorrendo o caminho:

app > assets > tailwind > application.css

Neste arquivo você vai configurar o tema e dentro do tema a fonte geral do teu site:

 @theme {
  --font-sans: "Jost", sans-serif;
}

Troque o "Jost" e o "sans-serif" pelo que estiver bem aqui nos arquivos da sua fonte lá no Google Fonts:

Agora que já fizemos as modificações, vamos restartar o servidor e recarragar os estilos colocando um bin/dev no terminal...

Antes e Depois

Antes:

Originalmente, eu estava utilizando essa fonte aqui no meu projeto Rails:

Depois:

Comparativo com o site originalda fonte