Extrator de fontes de sites.

O que é um extrator de fontes?

Um extrator de fontes é uma ferramenta online que encontra as fontes tipográficas usadas em uma página web e dá acesso direto aos arquivos por trás delas. Em vez de adivinhar uma fonte no olho, você cola um link e recebe uma lista precisa das famílias, pesos, estilos e formatos de arquivo que o site carrega. O FontExtractor é um extrator de fontes de sites gratuito que faz exatamente isso em poucos segundos, com pré-visualização ao vivo e download com um clique.

Os sites modernos quase nunca se limitam às poucas fontes instaladas em todos os computadores. Eles carregam fontes web personalizadas por meio de regras CSS @font-face — do Google Fonts, do Adobe Fonts, de uma CDN ou do próprio servidor. Essas regras ficam espalhadas por várias folhas de estilo, instruções @import aninhadas e tags <style> inline, o que torna a busca manual cansativa. Um extrator de fontes lê tudo isso para você.

Principais informações do FontExtractor

Como usar o extrator de fontes por URL

Usar o nosso extrator de fontes por URL leva menos de um minuto:

1. Copie o endereço da página cuja tipografia você quer analisar. Qualquer página pública funciona, não só a página inicial.
2. Cole no campo no topo desta página e clique em Extrair fontes. Pode deixar o https:// de fora; nós completamos para você.
3. Confira os resultados. Cada família aparece como um cartão, exibida na própria fonte, com todos os pesos e estilos listados abaixo.
4. Teste seu próprio texto no campo de pré-visualização e ajuste o tamanho para ver como a fonte se comporta em títulos e no corpo do texto.
5. Baixe ou copie. Salve arquivos individuais, baixe o conjunto completo em ZIP com um fonts.css correspondente ou copie o CSS @font-face de uma família.

Quais fontes um extrator de fontes de sites consegue detectar?

O FontExtractor detecta as fontes que uma página declara no HTML e no CSS: arquivos auto-hospedados, Google Fonts, Adobe Fonts, fontes variáveis e fontes incorporadas em base64, nos formatos WOFF2, WOFF, TTF, OTF, EOT e SVG.

O FontExtractor segue o mesmo caminho que um navegador ao renderizar uma página. Ele baixa o HTML, encontra cada folha de estilo vinculada (inclusive os truques de carregamento preload e print-then-all usados por sites otimizados), segue cadeias de @import por vários níveis e analisa cada bloco @font-face. O resultado inclui:

• Fontes auto-hospedadas servidas pelo próprio domínio ou CDN do site.
• Google Fonts, com cada subconjunto unicode, como latin, latin-ext ou cyrillic.
• Adobe Fonts (Typekit) e outros serviços de fontes entregues via CSS.
• Fontes variáveis, exibidas com toda a faixa de peso, por exemplo 100–900.
• Fontes base64 incorporadas diretamente na folha de estilo como URIs data:.
• Fontes pré-carregadas declaradas com <link rel="preload" as="font">.
• Todos os formatos comuns: WOFF2, WOFF, TTF, OTF, EOT e SVG. Quando uma regra oferece vários, o mais eficiente é escolhido automaticamente.

Além dos arquivos para download, a ferramenta mostra as pilhas de fontes que o CSS solicita. Assim você descobre se um site depende de fontes do sistema como -apple-system, Segoe UI ou Helvetica Neue, que nenhum extrator consegue baixar porque ficam no dispositivo do visitante.

Por que designers e desenvolvedores extraem fontes

A tipografia carrega boa parte da personalidade de uma marca, e por isso “que fonte é essa?” é uma das perguntas mais comuns no design. Veja as situações em que um extrator de fontes economiza mais tempo:

• Inspiração e pesquisa. Monte moodboards e compare como os melhores produtos combinam fontes de título e de texto.
• Desenvolvimento front-end. Recrie um layout com fidelidade, depure uma fonte que não carrega ou confira quais formatos o site entrega.
• Auditorias de marca. Garanta que todas as páginas do seu site carregam as fontes aprovadas e nenhum arquivo antigo esquecido.
• Análises de desempenho. Encontre sites que carregam pesos demais ou ainda servem arquivos TTF pesados em vez de WOFF2.
• Projetos para clientes. Quando o cliente não sabe quais fontes o site antigo usava, o extrator descobre em segundos.

Você pode usar as fontes extraídas de um site?

Conseguir baixar um arquivo de fonte não significa que você pode usá-lo. Fontes são software, e a maioria das fontes comerciais é licenciada por site, por aplicativo ou por número de visualizações. Muitas fontes da web são open source — quase tudo no Google Fonts usa a SIL Open Font License, por exemplo —, mas famílias premium de fundições ou do Adobe Fonts são licenciadas apenas para o site que as comprou.

Use o FontExtractor para identificar fontes, avaliá-las e testá-las localmente. Antes de publicar uma fonte no seu projeto, confira a licença e, se necessário, compre-a da fundição. Apoiar os designers de tipos é o que mantém novas fontes incríveis surgindo.

Extrator de fontes x DevTools e extensões

Use um extrator de fontes online para listar de uma vez todas as fontes de uma página. Use as DevTools do navegador ou uma extensão para páginas que exigem login ou fontes adicionadas por JavaScript.

Você pode descobrir fontes manualmente com as ferramentas de desenvolvedor do navegador: inspecione um elemento, abra o painel Computed e procure as requisições de fontes na aba Network. Funciona para um elemento, mas fica lento quando o site usa várias famílias, subconjuntos unicode e fontes variáveis. Extensões ajudam, mas exigem instalação, permissões em cada site que você visita e costumam mostrar só a fonte do elemento sob o cursor.

Um extrator de fontes online não precisa de instalação, funciona em qualquer dispositivo — inclusive celulares e tablets — e entrega de uma vez o inventário tipográfico completo da página, com pré-visualizações, nomes de arquivo organizados e CSS para baixar.

Dicas para os melhores resultados

Para os melhores resultados, analise exatamente a página que interessa e, se nenhuma fonte aparecer, tente diretamente a URL de uma das folhas de estilos dela.

• Analise exatamente a página que interessa. Landing pages, blogs e documentação costumam carregar fontes diferentes.
• Se um site não retornar fontes, ele pode montar os estilos com JavaScript depois de carregar. Tente analisar diretamente a URL de uma das folhas de estilo.
• Alguns sites bloqueiam acessos automatizados com proteção contra bots. Se a análise falhar, tente mais tarde ou use outra página do mesmo domínio.
• Na web, prefira arquivos WOFF2: são os menores e funcionam em todos os navegadores modernos.
• Mantenha as regras unicode-range do CSS copiado para que o navegador baixe apenas os subconjuntos necessários.

Quer saber quais fontes o seu site favorito usa? Volte ao topo, cole o link e deixe o extrator de fontes fazer o trabalho.