Use apenas WOFF2 ou, se precisar de suporte legado, WOFF. Não use nenhum outro formato
( svge eotsão formatos mortos ttfe otfsão fontes completas do sistema e não devem ser usados para fins da Web)
Em resumo, o tipo de fonte é muito antigo, mas apenas recentemente foi suportado por mais do que o IE.
eot é necessário para os Internet Explorer anteriores ao IE9 - eles inventaram as especificações, mas o eot era uma solução proprietária.
ttfe otfsão fontes antigas normais, então algumas pessoas ficaram aborrecidas porque isso significava que qualquer um podia baixar fontes caras de licença gratuitamente.
O tempo passa, o SVG 1.1 adiciona um capítulo "fontes" que explica como modelar uma fonte usando apenas a marcação SVG, e as pessoas começam a usá-la. Mais tempo passa e acontece que eles são absolutamente terríveis em comparação com apenas um formato de fonte normal, e o SVG 2 sabiamente remove o capítulo inteiro novamente.
Em seguida, woffé inventado por pessoas com bastante conhecimento de domínio, o que torna possível hospedar fontes de uma maneira que descarta bits que são extremamente importantes para a instalação do sistema, mas irrelevantes para a Web (deixando as pessoas preocupadas com a pirataria felizes) e permite compactação interna para melhor atender às necessidades da web (deixando usuários e hosts felizes). Este se torna o formato preferido.
2019 edit Alguns anos depois, woff2é redigido e aceito, o que melhora a compactação, levando a arquivos ainda menores, além da capacidade de carregar uma única fonte "em partes" para que uma fonte que suporte 20 scripts possa ser armazenada como "pedaços" "no disco, com os navegadores capazes de carregar a fonte" em partes "automaticamente, conforme necessário, em vez de precisar transferir toda a fonte antecipadamente, melhorando ainda mais a experiência de digitação.
Se você não deseja oferecer suporte ao IE 8 e inferior, e iOS 4 e inferior, e Android 4.3 ou anterior, basta usar o WOFF (e o WOFF2, um WOFF mais altamente compactado, para os navegadores mais recentes).
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}O suporte para woffpode ser verificado em http://caniuse.com/woff O
suporte para woff2pode ser verificado em http://caniuse.com/woff2
woff... tem um modo que impede as pessoas de piratear a fonte ? Como diabos isso pode / funciona?Woff é uma forma compactada (zipada) da fonte TrueType - OpenType. É pequeno e pode ser entregue na rede como um arquivo gráfico. Mais importante, dessa maneira, a fonte é preservada completamente, incluindo tabelas de regras de renderização, com as quais poucas pessoas se importam porque usam apenas scripts em latim.
Veja [URL morto removido]. A fonte que você vê é uma web experimental entregue smartfont (woff) que possui milhares de caracteres combinados, criando formas complexas. O texto subjacente é um código latino simples de Singhala romanizado. (Copie e cole no Bloco de notas e consulte).
Somente o woff pode fazer isso porque ninguém tem essa fonte e, no entanto, é vista em qualquer lugar (Mac, Win, Linux e até mesmo em smartphones por todos os navegadores, exceto pelo IE. O IE não tem suporte completo para tipos abertos).
fonte
O WOFF 2.0, baseado no algoritmo de compactação Brotli e outras melhorias em relação ao WOFF 1.0, que oferece mais de 30% de redução no tamanho do arquivo, é suportado no Chrome, Opera e Firefox.
http://en.wikipedia.org/wiki/Web_Open_Font_Format http://en.wikipedia.org/wiki/Brotli
http://sth.name/2014/09/03/Speed-up-webfonts/ tem um exemplo de como usá-lo.
Basicamente, você adiciona uma URL src ao arquivo woff2 e especifica o formato woff2. É importante ter isso antes do formato woff: o navegador usará o primeiro formato suportado.
fonte