Desde os problemas causados ​​pelo uso de Cufon eu me aventurei a deixar de usar recursos de fontes externas, mas ultimamente tenho procurado métodos alternativos de carregamento de fontes para ver se há uma maneira melhor; métodos melhores têm uma maneira de simplesmente aparecer do nada.

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

Vou listar os métodos que parecem mais bem recebidos abaixo, com alguns testes, mas realmente vale a pena mudar para um webfont? Parece que carregaria uma carga de recursos maior (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.

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

Estou realmente procurando as melhores práticas aqui, o desempenho é importante, mas também a escalabilidade e a facilidade de uso. Para não mencionar, olhar e sentir.

CSS do Google

• usa apenas folha de estilo externa
• usa apenas o menor tipo de arquivo compatível
• pode usar @importou <link>ou pegar o conteúdo de styleshee ( @font-face) e colocá-lo diretamente em sua própria folha de estilo.

Resultado dos testes

  78ms load of html
  36ms load of css

Método JS do Google

• usa webfont.jspara carregar o estilete
• usa apenas o menor tipo de arquivo compatível
• acrescenta :rootelemento com classe
• adiciona script à cabeça.

Resultado dos testes

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

Método Typekit

• acrescenta :rootelemento com classe.
• pode usar *.jstrecho ou arquivo carregado externamente *.jsarquivo
• usa em data:font/opentypevez do arquivo de fonte.
• adiciona script à cabeça
• adiciona css incorporado ao cabeçalho

• adiciona folha de estilo externa ao cabeçalho

  você pode facilmente adicionar / remover / ajustar fontes e seletores direcionados em 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 Font Squirrel

@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 da 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;

}

Primeiro, vou esclarecer algo sobre a oferta do Google. Na verdade, ele carregará o menor formato que seu navegador pode suportar. WOFF oferece tamanhos de arquivo pequenos, e seu navegador oferece suporte, então é o que você vê. WOFF também é amplamente suportado. No entanto, no Opera, por exemplo, você provavelmente obterá a versão TrueType da fonte.

A lógica do tamanho do arquivo também é, acredito, o motivo pelo qual o Font Squirrel os tenta nessa ordem. Mas isso é principalmente especulação da minha parte.

Se você estiver trabalhando em um ambiente onde cada solicitação e byte contam, você terá que fazer alguns perfis para descobrir qual funciona melhor para o seu caso de uso. As pessoas verão apenas uma página e nunca mais visitarão? Nesse caso, as regras de cache não importam tanto. Se eles estiverem navegando ou retornando, o Google pode ter regras de cache melhores do que o seu servidor. A latência é o maior problema ou a largura de banda? Se houver latência, busque menos solicitações, portanto, hospede-o localmente e combine os arquivos o máximo possível. Se for largura de banda, escolha a opção que terminar com o menor código e o menor formato de fonte.

Agora, vamos à consideração CSS vs JS. Vejamos a seguinte parte do HTML:

<head>
    <script type="text/javascript" src="script1.js"></script>
    <link rel="stylesheet" type="text/css" href="style1.css" />
    <style type="text/css">
        @import url(style2.css);
    </style>
    <script type="text/javascript">
        (function() {
            var wf = document.createElement('script');
            wf.src = 'script2.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
        })();
    </script>
</head>

Em muitos casos, script1, style1, e style2seria bloqueio. Isso significa que o navegador não pode continuar exibindo o documento até que o recurso seja carregado (embora os navegadores modernos confundam um pouco). O que pode ser uma coisa boa, especialmente com folhas de estilo. Isso evita um flash de conteúdo sem estilo e também evita a grande mudança que ocorreria ao aplicar os estilos (e mudar o conteúdo é realmente irritante para o usuário).

Por outro lado, script2não estaria bloqueando. Ele pode ser carregado posteriormente, e o navegador pode prosseguir para analisar e exibir o restante do documento. Isso também pode ser benéfico.

Falando especificamente sobre fontes (e ainda mais especificamente, a oferta do Google), eu provavelmente ficaria com um método CSS (eu gosto @importporque continua estilizando com a folha de estilo, mas poderia ser só eu). O arquivo JS carregado pelo script ( http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js ) é maior do que a @font-facedeclaração e parece muito mais trabalhoso. E não acredito que o carregamento da fonte em si (o WOFF ou TTF) esteja bloqueando, então não deve atrasar muito as coisas. Eu não sou pessoalmente um grande fã de CDNs, mas o fato é que eles são MUITO rápidos. Os servidores do Google vão superar a maioria dos planos de hospedagem compartilhada e, como suas fontes são tão populares, as pessoas podem até mesmo tê-las armazenadas em cache.

E isso é tudo que tenho.

Não tenho experiência com o Typekit, então deixei de fora da minha teorização. Se houver alguma imprecisão, sem contar generalizações entre navegadores por causa de argumentos, indique-as.

Acho que você abordou os tempos de carregamento muito bem em sua pergunta. Do meu ponto de vista, existem algumas fontes que devem ser adicionadas à lista e algumas outras considerações que devem ser examinadas para obter uma visão completa das opções.

Algumas outras fontes de fontes confiáveis

cloud.typography

http://www.typography.com/cloud/

Pelo que eu posso dizer, as fontes são incorporadas como dados em um arquivo CSS:

@font-face{ 
    font-family: "Font Name"; 
    src: url(data:application/x-font-woff;base64,d09GRk9UVE8AACSCAA0AAAAARKwAAQAAAAAiVAAAAi4AAAadAAAAAAAAAABDRkYgAAAIyAAAFCgAABmIK5m+CkdERUYAABzwAAAAHQAAACAAXQAER1BPUwAAHRAAAAQlAAAYAq+OkMNHU1VC ... ); 
    font-weight:400; font-style:normal; 
} 

Aqui estão minhas especificações:

94ms load of css from their server
37ms load of css from our server (will vary based on your configuration)
195ms load of data:fonts from our server (will vary based on your configuration)

Aqui está sua descrição de alto nível de sua implantação .

Fonts.com

Não usei este serviço, mas eles são fornecedores de fontes bem estabelecidos e as informações que listaram em seu site são bastante impressionantes. Não tenho especificações sobre seus métodos exatos, mas aqui está o que eu sei que eles têm:

• Algumas das fontes mais conhecidas do mundo disponíveis
• Uma biblioteca de fontes realmente grande (mais de 20.000)
• Downloads de fontes da área de trabalho para fazer maquetes
• Uma ferramenta personalizada para testar fontes da web no navegador
• Controles finos de tipografia e subconjuntos
• Opções de auto-hospedagem

FontSpring

Afiliado com FontSquirrel. As fontes podem ser adquiridas aqui por um preço fixo. Os arquivos de fontes e CSS que os acompanham são entregues para serem implantados em seu próprio servidor, como o FontSquirrel.

Especificações expandidas

Quanto aos prós e contras gerais de cada serviço de fonte, aqui estão algumas comparações:

Tamanho da biblioteca de fontes

• Fonts.com : 20.000+
• FontSpring : 1000+
• FontSquirrel : 300+
• Google : 600+
• Typekit : 900+
• Typography.com (cloud.typography.com): provavelmente 300+ (35 famílias)

Preços

• Fonts.com : US $ 20 / mês por 500.000 visualizações de página
• FontSpring : varia de acordo com a fonte (compra única de fontes)
• FontSquirrel : grátis
• Google : grátis
• Typekit : US $ 4 / mês por 500.000 visualizações de página
• Typography.com : $ 12,50 / mês para 1.000.000 visualizações de página

Qualidade da fonte

A qualidade das fontes da web pode variar um pouco. Isso pode abranger coisas como os próprios formatos das letras ou o espaçamento ou o tamanho do conjunto de caracteres. Tudo isso determina a impressão geral de qualidade que uma fonte dará. Embora as opções gratuitas tenham algumas boas opções, elas também têm algumas fontes que não são de alta qualidade, portanto, você deve escolher com cuidado essas fontes.

• Fonts.com : alta
• FontSpring : Mixed to High
• FontSquirrel : Mixed
• Google : Misto
• Typekit : High
• Typography.com : Muito alto (eu dou a isso uma designação "muito alta" porque Fonts.com, FontSpring e Typekit suportam fundições de vários tipos, em que são apenas fontes da fundição H&FJ, que está entre as melhores do mundo)

Qualidade da fonte II: Tipografia

Existem muitos refinamentos na tipografia de desktop que são realmente difíceis de obter em fontes da web. Alguns desses serviços oferecem maneiras de entregá-los.

• Fonts.com : kerning, espaçamento entre letras , ligaduras, caracteres alternativos, frações, etc.
• FontSpring : Nenhum
• FontSquirrel : Nenhum
• Google : nenhum
• Typekit : Nenhum
• Typography.com : versaletes, ligaduras, caracteres alternativos, estilos de números alternativos, frações, etc.

Suporte de navegador

Isso se resume principalmente aos formatos de fonte que são suportados por cada serviço. Os principais são:

• EOT: para Internet Explorer (IE 4+)
• TrueType e OpenType: formatos tradicionais (Safari 3.1+, FF 3.5+, Opera 10+)
• WOFF: Novo padrão para fontes da web (FF 3.6+, Chrome 5+)
• SVG: IOS <4,2

Mais informações em The @ Font-Face Rule e úteis Web Font Tricks

Todos esses serviços oferecem suporte aos principais formatos de fonte. Com fontes auto-hospedadas, contanto que você use a sintaxe correta, você deve estar coberto. Aqui está uma atualização de 2011 da sintaxe à prova de balas do FontSpring :

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  }

Desempenho I: Downloads

Pelo que entendi, usar a sintaxe acima permite que os navegadores obtenham o formato específico que funciona para eles, portanto, não há perda de downloads em formatos de fonte que não funcionam.

Os serviços pagos como Fonts.com, Typekit ou Typography.com usam métodos para detectar o formato correto e, em seguida, fornecer o formato de fonte correto, geralmente como dados base64 em um arquivo CSS.

Pelo que posso ver, as diferenças nos métodos listados acima são bastante insignificantes para usuários de Internet de alta velocidade (parece uma diferença de <200 ms), mas pode valer a pena considerar para dispositivos em redes mais lentas, especialmente para acessos de página sem cache.

Desempenho II: Subsetting

Se você sabe que haverá apenas alguns caracteres que deseja usar, pode construir sua fonte com um subconjunto de caracteres e, assim, reduzir o tamanho do download.

• Fonts.com : controle muito detalhado
• FontSpring : pode recompilar como subconjunto por meio do gerador de fontes da web FontSquirrel
• FontSquirrel : pode recompilar como um subconjunto via gerador de webfont
• Google : controle muito detalhado
• Typekit : opções limitadas de "todos os caracteres" ou "padrão"
• Typography.com : controle muito detalhado

Desempenho III: Entrega

• Fonts.com : CDN Global ou seu próprio servidor
• FontSpring : baseado em seu servidor
• FontSquirrel : baseado em seu servidor
• Google : super-CDN global
• Typekit : Global CDN
• Typography.com : CDN Global (125.000 servidores)

Suporte de linguas

• Fonts.com : 40 idiomas, incluindo asiático e Oriente Médio
• FontSpring : Western, dependendo da fonte
• FontSquirrel : Western, dependendo da fonte
• Google : Ocidental, dependendo da fonte
• Typekit : Western, dependendo da fonte
• Typography.com : Western, dependendo da fonte

Teste e Implementação

• Fonts.com : Muito fácil, com ferramentas extensas e personalizáveis
• FontSpring : Técnico (faça você mesmo)
• FontSquirrel : Técnico (faça você mesmo)
• Google : fácil
• Typekit : fácil
• Typography.com : Teste fácil, um pouco mais complicado para mudar uma vez implantado

Bem, como você está depois

... procurando as melhores práticas aqui, o desempenho é importante, mas também a escalabilidade e a facilidade de uso. Para não mencionar, olhar e sentir.

a resposta é (como sempre em web design): Depende!

Uma coisa certa é que eu não recomendaria usar a abordagem JS (mostrada em seu segundo exemplo).

Pessoalmente, não gosto de fazer coisas de apresentação e estilos CSS dependendo do Javascript, embora a grande maioria dos usuários o tenha habilitado. É uma questão de não misturar as coisas.

E como você pode ver no seu exemplo dado, existe algum tipo de FOUC (flas de conteúdo não estilizado), porque a página já foi renderizada pelo navegador antes da fonte estar disponível. Assim que estiver, a página será redesenhada. E quanto maior o site, maior o impacto (desempenho)!

Então, eu nunca usaria qualquer solução JS para incorporação de fontes.

Agora, vamos dar uma olhada nos métodos CSS puros.
Há algum tempo aqui está uma discussão sobre "vs. @import". Pessoalmente, prefiro evitar o uso de @import e sempre usar <link>apenas. Mas isso é principalmente uma questão de preferências pessoais. A única coisa que você nunca deve fazer é misturar os dois!

Local vs. CDN
Ao decidir se deseja hospedar seus arquivos de fontes localmente ou usar um CDN, então, na maioria das vezes, depende do número de fontes diferentes e das respectivas fontes que deseja incorporar.

Por que isso é importante ou desempenha um papel?
Do ponto de vista do desempenho, eu recomendaria incluir a fonte Base64 codificada em sua (uma) folha de estilo. Mas apenas o formato .woff, já que é usado por quase todos os navegadores modernos, o que significa para a maioria dos visitantes. Para todos os outros usuários, conviver com a solicitação adicional.

Porém, devido ao "overhead" causado pela codificação Base64 e pelo tamanho de um arquivo de fonte (mesmo no formato .woff), esta técnica só deve ser usada se você não tiver mais do que 3 ou 4 fontes diferentes. E sempre certifique-se de que seu servidor entrega os arquivos (CSS) compactados.

A grande vantagem de fazer isso é que você não tem uma solicitação adicional para o arquivo de fonte. E após o carregamento da primeira página (independentemente da página do seu site), o arquivo CSS é armazenado em cache. Isso também é uma vantagem se você usar o cache do aplicativo HTML5 (o que certamente fará).

Além do fato de que um autor não deve usar mais do que 3 ou 4 fontes diferentes em seu site, vamos dar uma olhada no método de uso do CDN do Google.

Em primeiro lugar, esteja ciente de que você pode (e sempre deve) incluir todas as fontes desejadas em uma única <link>, como:

<link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic|PT+Sans:400,700,400italic,700italic|Montez' rel='stylesheet' type='text/css'>

Isso resultará na seguinte resposta:

@font-face {
  font-family: 'Montez';
  font-style: normal;
  font-weight: 400;
  src: local('Montez'), local('Montez-Regular'), url(http://themes.googleusercontent.com/static/fonts/montez/v4/Zfcl-OLECD6-4EcdWMp-Tw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/0XxGQsSc1g4rdRdjJKZrNBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/PIPMHY90P7jtyjpXuZ2cLD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/lILlYDvubYemzYzN7GbLkHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  src: local('PT Serif'), local('PTSerif-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/sDRi4fY9bOiJUbgq53yZCfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  src: local('PT Serif Bold'), local('PTSerif-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/QABk9IxT-LFTJ_dQzv7xpIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  src: local('PT Serif Italic'), local('PTSerif-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/03aPdn7fFF3H6ngCgAlQzBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 700;
  src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/Foydq9xJp--nfYIx2TBz9QFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
}

Como você pode ver, existem 9 arquivos de fontes diferentes, o que significa um total de 10 (incluindo a do elemento link) solicitações, se o usuário não tiver uma ou mais das fontes solicitadas instaladas localmente. E essas solicitações são repetidas a cada nova solicitação de página em seu site (embora nenhum dado seja transferido)! Além disso, a resposta à solicitação do <link>nunca é armazenada em cache.

Recomendação:
Afinal, eu realmente recomendo incluir seus arquivos de fonte no formato .woff Codificado em Base64 em sua folha de estilo!

Veja este belo artigo para obter um exemplo e uma descrição de como fazer isso!

Eu uso o método css inline porque a sobrecarga da solicitação extra é maior do que o aumento de tamanho durante a codificação bease64. Isso também é compensado pela compressão gizip pelo servidor dos arquivos css.

Outra opção é usar o carregamento assíncrono de fontes, mas na maioria das vezes os usuários verão as fontes surgindo após o carregamento.

Independentemente do método, você pode reduzir o tamanho do arquivo de fonte incluindo apenas os conjuntos de caracteres que usará.

Pessoalmente, eu uso o Google Fonts. Eles têm uma boa variedade de opções e recentemente aprimoraram a compactação das fontes, mudando para a compactação Zopfli também. O Google está se esforçando para tornar a web mais rápida, então acho que mais otimização nessa parte virá deles também.

O que quer que você escolha como uma entrega de fontes terceirizada, você sempre obterá reduções na velocidade pelas solicitações de obtenção das fontes. A melhor coisa, vista de uma perspectiva de velocidade, seria servir as fontes você mesmo. Se você não se importa com os milissegundos extras que leva para carregar de uma entrega terceirizada, deve continuar se acha que a facilidade de usá-los vale milissegundos.

Não sei sobre o Typekit e os outros, mas com o Google Fonts você pode optar por receber subconjuntos específicos e variedade de caracteres para acelerar ainda mais a entrega.

Escolhendo um subconjunto:

<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin" rel="stylesheet">

Escolha de uma variedade de personagens:

<!-- Only serve H,W,e,l,o,r and d -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=HelloWorld" rel="stylesheet">

Você pode usar dns-prefetch para melhorar ainda mais a velocidade com a entrega de fontes.

Eu realmente acho, e espero, que o Google faça todo o possível para acelerar a entrega de suas fontes o máximo que puderem. Os milissegundos que leva para carregá-los não prejudicam meu site, então eu os uso com prazer.

Longa história curta:

Se a entrega de fontes em milissegundos está prejudicando seu site, por exemplo, fazendo-o carregar mais do que o recomendado 1 segundo, acho que você mesmo deve hospedá-las.

A melhor opção é importar as fontes usando ajax, assim:

<script>
    (function() {
        var font = document.createElement('link'); 
        font.type = 'text/css'; 
        font.rel = 'stylesheet';
        font.href = '/url/to/font.css';
        var s = document.getElementsByTagName('link')[0]; 
        s.parentNode.insertBefore(font, s);
      })();
</script>

Eu faço isso na minha página da web e ganho 9 pontos no teste do Google Insights.