Desde os problemas causados pelo usoCufon Eu me arrisquei a usar recursos de fontes externas, mas ultimamente tenho procurado métodos alternativos para carregar fontes para ver se há uma maneira melhor; métodos melhores têm uma maneira de aparecer do nada.

Existem muitos métodos novos por aí e variações para cada método que parece; Devo usartypekit? ougoogle webfonts (com js ou css)? devo continuar usando fontes de carregamento local (por exemplo, método gerado fontsquirrel.com)?

Vou listar os métodos que parecem mais bem recebidos abaixo, com alguns testes, mas vale a pena mudar para uma fonte da web? Parece que ele carregaria uma carga de recursos mais alta (solicitações de http) e teria menos tipos de formato de arquivo (menos compatibilidade) etc. Mas parece que os arquivos são carregados de forma assíncrona e eficiente na maioria dos casos.

É apenas uma questão de situação e necessidade? Se sim, o que são?Existem diferenças drásticas entre esses métodos?Existe um método melhor por aí que eu não listei?Quais são os prós / contras do desempenho? Veja? dependências? compatibilidades?

Estou realmente procurando as melhores práticas aqui, o desempenho é uma grande coisa, mas também a escalabilidade e a facilidade de uso. Sem mencionar, aparência.

CSS do Googleusa apenas folha de estilo externausa apenas o menor tipo de arquivo compatívelpode usar@import ou<link> ou pegue o conteúdo do styleshee (@font-face) e coloque-o diretamente em sua própria folha de estilo.

Resultado dos testes

  78ms load of html
  36ms load of css

Método JS do Googleusawebfont.js carregar styleshetusa apenas o menor tipo de arquivo compatívelacrescenta:root elemento com classeadiciona script à cabeça.

Resultado dos testes

    171ms load of html
    176ms load of js
    32ms load of css

Método Typekitacrescenta:root elemento com classe.pode usar*.js fragmento ou arquivo carregado externamente*.js Arquivousadata:font/opentype em vez de arquivo de fonte.adiciona script à cabeçaadiciona css incorporado à cabeça

adiciona folha de estilo externa à cabeça

você pode adicionar / remover / ajustar fontes e seletores direcionados facilmente de typekit.com

Resultado dos testes

  169ms load of html
  213ms load of js
  31ms load of css
  3ms load of data:font/

… E o método do esquilo da fonte

@font-face{
    font-weight:400;
    font-style:normal;
    font-family:open_sanslight;
    src:url(../font/opensans-light-webfont.eot);
    src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
        url(../font/opensans-light-webfont.woff) format(woff),
        url(../font/opensans-light-webfont.ttf) format(truetype),
        url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}

… Ou com dados: método de fonte…

@font-face {
    font-family: 'open_sanslight';
    src: url('opensans-light-webfont-f.eot');
}

@font-face {
    font-family: 'open_sanslight';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
         url('opensans-light-webfont-f.ttf') format('truetype'),
         url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}