Como testar fontes em um site e mostrar o antes e o depois para o seu cliente

Para mostrar uma fonte nova a um cliente, abra o site dele no Chrome, teste a fonte na página de verdade com a extensão gratuita FontMee e aperte o botão de antes/depois. O FontMee tira duas capturas de tela, uma com a fonte antiga e outra com a nova, e junta tudo numa imagem só, que você cola num e-mail ou salva como PNG. Nada muda no site real do cliente, só na sua tela.

Por que uma imagem no site de verdade vence um mockup

Um mockup é uma imagem inventada de como a página poderia ficar, em geral desenhada num programa de design. Dá trabalho para montar, e uma fonte costuma parecer outra quando as palavras, o logotipo e as fotos reais do cliente estão ao redor. Quando você testa a fonte na página de verdade, o cliente vê o próprio site com a fonte nova, e é nesse momento que ele consegue dizer sim ou não.

Você ainda economiza uma rodada de trabalho. Dá para testar três fontes em dez minutos, mandar três imagens e montar só a que o cliente escolher.

O que você precisa

• Google Chrome num computador, porque é lá que as extensões funcionam.
• O endereço do site que você quer mostrar: o seu, o de um cliente ou até o de um concorrente.
• A extensão gratuita FontMee, um pequeno complemento que dá ao Chrome um recurso novo. Sem conta, sem pagar nada.

O antes e depois em seis passos

O FontMee mostra uma fonte em qualquer página sem mudá-la para mais ninguém. Aqui está o trabalho todo, e o vídeo curto mostra o painel em ação.

1. Instale o FontMee. Adicione pela Chrome Web Store. É grátis e não pede conta. Clique no ícone de quebra-cabeça do Chrome e fixe a extensão, assim ela fica sempre a um clique.
2. Abra o site do cliente e clique no ícone do FontMee. O painel abre ao lado da página. Você também pode apertar Alt + Shift + F. As páginas do próprio Chrome (Nova guia, a Web Store, páginas chrome://) não podem ser alteradas.
3. Escolha a fonte nova. Em Aplicar mudanças em escolha Tudo, Títulos ou Texto e clique numa fonte. Quer uma fonte de títulos e uma de texto que combinem bem? Abra Pares de fontes e aperte Usar este par. Nosso guia dos melhores pares de fontes do Google mostra alguns.
4. Enquadre a imagem. A imagem mostra o que está na sua tela agora, então role até a parte que quer mostrar, por exemplo o topo da página inicial, e use Ajustar para o tamanho, a espessura e a altura da linha até ficar bom.
5. Aperte Antes / depois. É o botão com o ícone de câmera, ao lado do alternador Fonte original e Prévia do FontMee. O FontMee traz a guia para a frente e tira duas capturas, primeiro com a fonte nova e depois com a original. O Chrome só permite duas capturas por segundo, então espere um instante e não troque de guia.
6. Envie. Abre uma janelinha com a imagem. Com Controle deslizante você arrasta uma divisória pela página, e com Lado a lado vê as duas de uma vez. Aperte Copiar imagem e cole com Ctrl+V num e-mail ou chat, ou Salvar imagem para ter um arquivo PNG. A imagem unida traz os rótulos Antes e Depois.

Mostre ao vivo numa reunião ou mande depois

Se o cliente estiver numa chamada de vídeo, compartilhe a sua guia do Chrome e alterne entre Fonte original e Prévia do FontMee no topo do painel. Você também pode apertar Alt + Shift + O para alternar, mesmo com o painel fechado. O FontMee ainda tem o botão Manter no site, assim as suas fontes continuam lá quando você abrir a página de novo. Se o cliente não estiver por perto, a imagem fala por você.

Facilite o sim do cliente

• Mostre duas ou três opções, não dez. Uma imagem por fonte basta.
• Escreva o nome das fontes no e-mail, para o cliente poder responder “a segunda”.
• Mantenha a mesma parte da página em cada imagem, para que a única diferença seja a fonte.
• Quando ele escolher, volte ao FontMee e aperte Copiar CSS. Você recebe o código que faz acontecer, e o nosso guia para adicionar Google Fonts mostra onde ele vai.

Quatro coisas para conferir antes de enviar

• É só uma prévia. Ninguém mais vê a fonte nova até o código ser colocado no site real. Avise o cliente, para ele não procurar na internet.
• Confira as palavras reais. Olhe títulos, botões e parágrafos longos. Uma fonte linda num título pode cansar num parágrafo.
• Confira as letras especiais. Se o site usa letras como ç, ã, é ou ô, role até algumas e veja se aparecem direito. O FontMee filtra fontes por alfabeto, como Latin Extended ou cirílico.
• Confira a licença. O Google Fonts é código aberto e as fontes do Fontshare são livres para usar, mas uma fonte que o cliente já tem pode ter regras próprias. O FontMee mostra um lembrete de licença quando você copia o código.

Ainda não tem um site? Então a fonte vem em segundo lugar. Um site também precisa de uma casa para morar, e um construtor é o jeito mais rápido de ter uma sem código.

Baixe a extensão

O FontMee é grátis, com mais de 1.900 fontes, Copiar CSS em quatro formatos, um ZIP para hospedar você mesmo e o envio das suas próprias fontes. Sem conta, sem assinatura. Adicione pela Chrome Web Store ou leia primeiro a página do FontMee.

Bom saber antes de começar

Perguntas frequentes