WebFonter: Visualize as fontes da FontShop em qualquer site — O que funciona agora

O WebFonter era uma ferramenta de navegador que permitia experimentar fontes da FontShop diretamente em um site antes de comprá-las. Ele possibilitava que designers alterassem títulos e o corpo do texto em vez de avaliar uma fonte a partir de uma amostra estática. Esse fluxo de trabalho original agora é história: a loja online da FontShop fechou em 2023 e o antigo endereço do WebFonter redireciona para uma página de informações da FontShop, em vez de uma ferramenta de instalação. Você ainda pode visualizar fontes pelo MyFonts e experimentar com a tipografia do seu site nas ferramentas de desenvolvedor do navegador.

Ainda é possível instalar o WebFonter?

Não confie nas instruções antigas de instalação do WebFonter. De acordo com as perguntas frequentes oficiais da Monotype sobre o encerramento da plataforma , a plataforma de comércio FontShop.com foi desativada em 15 de dezembro de 2023. O endereço original do WebFonter agora leva à página de informações do FontShop, que direciona os clientes para o MyFonts. Não foi possível verificar se existe alguma extensão ou bookmarklet do WebFonter atualmente compatível. Portanto, as instruções antigas para a extensão e o bookmarklet do Chrome devem ser consideradas como um registro de como o produto funcionava, e não como um guia de instalação válido.

O que o WebFonter fazia originalmente

A principal vantagem da ferramenta era visualizar uma fonte em contexto. Em vez de abrir uma amostra de fonte separada, um designer podia visualizar uma página real e alterar sua tipografia, mantendo o layout visível.

1. Abra um site. A ferramenta original era oferecida como uma extensão do Chrome e como um bookmarklet para outros navegadores. Ela era descrita como utilizável em sites online e hospedados localmente, desde que seu serviço de fontes estivesse acessível.
2. Selecione uma família de fontes. O controle Alterar Família oferecia a opção de navegar e pesquisar fontes no catálogo da FontShop. Ao selecionar uma família, a pré-visualização da página era atualizada.
3. Atribua e ajuste estilos. A interface original começava com título e corpo do texto, permitia adicionar outros elementos e oferecia um controle de ajustes para tamanho, altura da linha e espaçamento.

Estas são descrições históricas de funcionalidades, não menus atuais confirmados. Algumas análises antigas também mencionavam um atalho Ctrl+H para ocultar os controles do WebFonter. Evite seguir esse conselho em um navegador moderno: Ctrl+H normalmente abre o histórico de navegação se a página ou ferramenta não o interceptar.

Como testar fontes da FontShop em um site hoje em dia

A coleção FontFont da FontShop agora está disponível na página oficial de informações da FontShop e em MyFonts . A abordagem a seguir separa a descoberta de fontes dos testes na página; diferentemente do antigo WebFonter, não se trata de uma pré-visualização direta da FontShop para o site com um único clique.

1. Visualize a fonte usando suas próprias palavras.

Encontre uma família de fontes adequada no MyFonts. Na pré-visualização da família de fontes ou do estilo individual, insira um título, rótulo de navegação ou parágrafo do seu projeto. De acordo com as Perguntas Frequentes do MyFonts , você pode ajustar o tamanho e as cores da pré-visualização e inspecionar os recursos OpenType compatíveis. O recurso Álbuns também ajuda a reunir fontes para comparação lado a lado. Verifique diferentes pesos: uma fonte de exibição atraente pode não ser adequada para parágrafos longos.

2. Inspecione o texto que deseja alterar.

Abra seu site no Chrome, clique com o botão direito em um título ou parágrafo e escolha "Inspecionar" . O painel "Elementos" identifica o nó HTML selecionado; o painel "Estilos" lista o CSS que o afeta. Você também pode usar o seletor de elementos para selecionar texto na página. Consulte o guia do Modo de Inspeção do Google para obter informações sobre os controles documentados.

3. Experimente temporariamente com a tipografia.

Em Elementos → Estilos , edite uma declaração de família de fontes existente ou adicione uma ao elemento selecionado. Por exemplo, teste Georgia, serif como uma fonte local que representa a direção de uma fonte serifada e, em seguida, experimente com tamanho da fonte , altura da linha ou espaçamento entre letras . As alterações geralmente são visíveis imediatamente, mas não são permanentes no seu site publicado. O Google explica esses controles na referência de CSS das Ferramentas de Desenvolvedor .

Importante: Digitar o nome de uma fonte comercial no CSS não baixa ou carrega essa fonte automaticamente. Para visualizar a fonte comercial real na sua página, ela precisa estar disponível por meio de um recurso de fonte devidamente licenciado e carregado ou de uma instalação local permitida. Caso contrário, o navegador exibirá uma fonte alternativa. Não confunda a pré-visualização da fonte alternativa com a fonte que você pretende comprar.

4. Verifique a licença antes de implantar.

Uma pré-visualização gratuita na loja não é uma licença para hospedar os arquivos de fonte em um site público. A MyFonts explica que as fontes da web são incorporadas por meio de @font-face e exigem uma licença apropriada para fontes da web; os domínios permitidos e os termos de visualização de página dependem da licença oferecida para esse produto. Revise as informações de licenciamento da família de fontes e os termos de compra antes de adicionar os arquivos à produção. Uma licença para desktop, por si só, não deve ser considerada suficiente para a incorporação na web.

O que verificar antes de escolher a fonte final

• Ajuste do título: O título se ajusta naturalmente às larguras de tela em computadores e dispositivos móveis?
• Legibilidade do corpo do texto: Os tamanhos pequenos, a altura da linha e a densidade do parágrafo são confortáveis?
• Espessuras e caracteres: Os glifos de negrito, itálico, pontuação e idioma de que você precisa estão disponíveis?
• Carregamento real: o rosto real é exibido ou apenas uma imagem alternativa do navegador?
• Licenciamento: O plano adquirido cobre o uso do seu site?

Se uma alteração parecer não surtir efeito, verifique se uma regra CSS mais específica está sobrescrevendo sua edição, se a fonte está realmente carregada e se você selecionou o elemento correto da página. Teste com mais de uma largura de viewport. O apelo original do WebFonter era o contexto imediato; hoje, combinar um exemplo do MyFonts com edições temporárias do DevTools oferece uma maneira prática de fazer uma escolha tipográfica informada sem precisar alegar que a ferramenta descontinuada ainda está disponível.