O que exatamente é uma fonte da Web e o que a conversão em uma envolve?

Eu li alguns artigos sobre isso, mas as diferenças técnicas reais entre fontes da Web e fontes da área de trabalho ainda me escapam. Quanto mais eu leio sobre o assunto, mais sinto que ninguém tem uma definição técnica clara do que exatamente é uma fonte da web.

Quando eu carrego uma fonte "desktop" em um serviço de geração de fontes da Web como o FontSquirrel, o que exatamente esses serviços fazem no arquivo de fontes para torná-lo uma fonte da Web? Se o principal uso desses serviços é a conversão para diferentes formatos, que formatos são realmente necessários na web moderna para oferecer suporte a um número razoável de navegadores a partir de 2019?

Uma "fonte da web" é apenas uma fonte usada na web ou no navegador. O que esses geradores de fontes da Web fazem é facilitar a sua vida, fornecendo o css necessário para fornecer a fonte aos visitantes e convertê-la em todos os formatos de arquivo necessários para garantir que a fonte funcione em vários navegadores.

Algumas fontes são consideradas "seguras para a web" simplesmente por serem tão comuns que todo computador as possui, como "Arial". Você não precisa fazer nada, mas instruir o site a usar essa fonte. As fontes da Web precisam ser baixadas pelo navegador do visitante, porque se uma fonte não estiver no seu computador, você não a verá.

Os formatos de fonte desenvolvidos especificamente para a Web, como o Woff, são projetados com um tamanho pequeno de arquivo em mente. As fontes do Google também oferecem diferentes formatos para você, dessa forma, está um pouco oculto.

É muito importante observar que algumas fontes podem ter uma licença de fonte da Web separada, que talvez você não tenha, mesmo que possua os arquivos de fonte. Assim como as imagens do google ... Só porque você conseguiu fazer o download da imagem, não significa que você possa usá-la para vender a loção pós-barba da sua empresa.

Developers.google.com tem uma boa publicação que se concentra na otimização de fontes da Web, mas também tem algumas informações básicas.

Há um trecho muito bom sobre os diferentes formatos nesse artigo:

Hoje existem quatro formatos de contêiner de fontes em uso na Web: EOT, TTF, WOFF e WOFF2. Infelizmente, apesar da ampla variedade de opções, não existe um único formato universal que funcione em todos os navegadores antigos e novos: o EOT é apenas para o IE, o TTF possui suporte parcial para o IE, o WOFF possui o suporte mais amplo, mas não está disponível em alguns navegadores mais antigos. , e o suporte ao WOFF 2.0 é um trabalho em andamento para muitos navegadores.

Então, onde isso nos deixa? Não existe um único formato que funcione em todos os navegadores, o que significa que precisamos fornecer vários formatos para fornecer uma experiência consistente

O Transfonter também possui uma tabela muito boa sobre o suporte ao navegador:

Fiz uma pesquisa mais detalhada depois de fazer essa pergunta e, portanto, adicionei esta resposta como uma espécie de adendo à de Joonas, o que foi bom, mas não respondeu à minha última pergunta em detalhes suficientes para mim:

Se o principal uso desses serviços é a conversão para diferentes formatos, que formatos são realmente necessários na web moderna para oferecer suporte a um número razoável de navegadores a partir de 2019?

Muitos desenvolvedores argumentam que WOFF e WOFF2 são os únicos formatos de fonte necessários no desenvolvimento moderno da web . No entanto, essas respostas não são boas e também acho que estão sendo um pouco exageradas, então vamos começar examinando os números reais de suporte para WOFF e WOFF2, cortesia de CanIUse.com, que é o padrão do setor para documentar isso. tipo de coisa.

Suporte para WOFF2

O WOFF2 aprimora o WOFF em todos os aspectos , é suportado pela maioria dos navegadores de desktop lançados após 2014, mas apenas desde 2018 começou a ser suportado pela maioria dos navegadores móveis. É apoiado por um estimado 93% dos navegadores em todo o mundo.

Suporte para WOFF

O WOFF começou a ser suportado pelo Internet Explorer no IE9 (lançado em 2011), que torna o formato EOT obsoleto para versões do IE lançadas desde 2011. É suportado por cerca de 97% dos navegadores em todo o mundo.

Outros navegadores de desktop começaram a oferecer suporte ao WOFF aproximadamente ao mesmo tempo, incluindo Firefox desde Firefox 3.6, Chrome desde Chrome 5 e Safari desde 5.1 (lançado em 2010, 2011 e 2011 respectivamente), tornando obsoletos os formatos TTF e OTF ¹ em versões anteriores . A maioria dos navegadores móveis oferece suporte ao WOFF desde 2013.

Advertência e Conclusões

Desse ponto de vista, é fácil ignorar todos os outros formatos como desnecessários, mas o software que não é mais oficialmente suportado nunca foi um bom indicador de que não está mais sendo usado. Em outras palavras, não é garantido que o compartilhamento global de versão do navegador seja representativo dos dados demográficos pelos quais seu site será usado.

O compartilhamento de versão do navegador pode variar drasticamente entre os dados demográficos: fatores como país, classe social e renda influenciam fortemente quais dispositivos (e, portanto, versões dos navegadores) seus usuários estão usando. Como desenvolvedor, pense se o site que você está construindo será usado por informações demográficas com maior probabilidade de usar essas versões mais antigas.

Se você decidir que é esse o caso e precisar suportar navegadores de desktop anteriores a 2011 ou móveis antes de 2013, use a pilha completa de fontes: WOFF2, WOFF, TTF (ou OTF) e EOT.

Se você não precisa oferecer suporte a esses navegadores antigos, e ainda é verdade que provavelmente não precisa, basta usar WOFF2 e WOFF como sua pilha de fontes a partir daqui.

_{(1) TTF e OTF são formatos tradicionais de fontes da área de trabalho e qualquer navegador que suporte um suporta o outro, portanto, nunca use os dois}

Não muito.

O WOFF nada mais é do que um formato compactado para TTF, resultando em um tamanho menor. Os internos não mudam. O WOFF2 vai um pouco mais longe, modifica ligeiramente a representação da fonte para obter um pouco mais de compactação. EOT, sendo um formato somente para MS, não conta. O SVG é praticamente apenas contornos, dificilmente mais, portanto, não conta como uma fonte real, apenas use-a para ícones, se houver.

Basta usar o WOFF e terminar com ele. Se você deseja extrair o último byte, também pode oferecer o WOFF2, mas a diferença será insignificante.

Eu gostaria de enfatizar algo realmente básico: uma "webfont", além dos detalhes técnicos da implementação, é uma fonte que você foi licenciada pelo criador ou detentor dos direitos para a tarefa específica de usar em um site. E esses virão em um formato webfont. Se você estiver sentado na frente de um gerador para converter uma fonte em um formato WebFonte e não for de código aberto ou um que você mesmo desenhou, pare aí mesmo! Você quase certamente está quebrando a licença e pode ser processado. E como está na Web, é fácil para as pessoas encontrarem o que você está fazendo e comparar com a lista de vendas.

Veja, por exemplo, esse idiota , que trabalhou no Facebook e no Google, que não percebeu até que alguém lhe disse que ele estava tecnicamente usando uma fonte pirata em seu site. Ele tinha uma licença de assinatura de desktop, mas isso não é uma licença para uso na web.