Incluindo link ou importação do Google Web Fonts?

190

Qual é a maneira preferida de incluir o Google Web Fonts em uma página?

  1. através da tag link?

    <link href = 'http: //fonts.googleapis.com/css? family = Judson: 400,400italic, 700' rel = 'stylesheet' type = 'text / css'>

  2. via importação em uma folha de estilo?

    URL de importação (http://fonts.googleapis.com/css?family=Kameron:400.700);

  3. ou use o carregador de fontes da web

    https://developers.google.com/webfonts/docs/webfont_loader

fonts webfonts google-webfonts kajo
fonte
3
Você também pode querer ler esta pergunta antes de usar as fontes do google. dependendo do projeto específico - nem sempre é a escolha inteligente.
Obmerk Kronen

Respostas:

285

Em mais de 90% dos casos, você provavelmente deseja a <link>tag. Como regra geral, você deseja evitar @importregras, porque elas adiam o carregamento do recurso incluído até que o arquivo seja buscado. : provedores dinâmicos como o Google WebFonts veiculam versões específicas das plataformas das fontes; portanto, se você simplesmente incorporar o conteúdo, poderá acabar com fontes quebradas em algumas plataformas.

Agora, por que você usaria o carregador de fontes da web? Se você precisar de controle completo sobre como as fontes são carregadas. A maioria dos navegadores adiará a pintura do conteúdo na tela até que todo o CSS seja baixado e aplicado - isso evita o problema "flash de conteúdo não estilizado". A desvantagem é que você pode ter uma pausa extra e um atraso até que o conteúdo seja visível. Com o carregador JS, você pode definir como e quando as fontes se tornam visíveis. Por exemplo, você pode até desbotá-las depois que o conteúdo original for pintado na tela.

Mais uma vez, o caso de 90% é a <link>tag: use uma boa CDN e as fontes diminuirão rapidamente e, mais provavelmente, serão exibidas fora do cache.

Para mais informações e uma visão aprofundada do Google Web Fonts, confira este vídeo GDL

igrigorik
fonte
1
"porque eles adiam o carregamento do recurso incluído até que o arquivo seja buscado" - esse não é um bom motivo para usar @import? Porque normalmente você não quer ver o conteúdo até que a fonte foi carregado (para evitar que a cintilação da fonte)
Alex
2
A API de fontes da Web é muito útil ao trabalhar com o HTML5 Canvas. Você não pode usar uma fonte que não tenha terminado o carregamento antes de desenhar o texto e, é claro, depois que a fonte é carregada, ela não é atualizada automaticamente. Da mesma forma, a API é necessária para acompanhar o progresso do carregamento de ativos, por exemplo, em um jogo.
rvighne
14
Esta informação deve estar na página de fontes da web do Google. Ele apenas apresenta as três opções para você - e não fornece dicas úteis sobre qual usar e quando.
Gal
5
O tutorial " Introdução " do Google usa apenas o <link>método, então acho que é o que eles recomendam de maneira não dita
James Cushing -
2
Você também pode adicionar rel="preload"à <link>tag, porque a fonte será carregada antes que o texto apareça. Veja 3perf.com/blog/link-rels
Elijah Mock
3

Use o <link>fornecido pelo Google porque há versões na fonte, mas logo acima, use o recurso de pré-conexão do HTML5 para solicitar aos navegadores que abram uma conexão TCP e negociem o SSL com antecedência em fonts.gstatic.com. Aqui está um exemplo, que obviamente precisa residir em sua <head></head>tag:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
Mark Cilia Vincenti
fonte
É correto que a pré-conexão seja um domínio completamente diferente do link da folha de estilo no seu exemplo? fonts.gstatic.comversusfonts.googleapis.com
BadHorsie 15/01
1
@BadHorsie é o ponto principal disso. A folha de estilo em fonts.googleapis.com possui um link para um recurso em fonts.gstatic.com. Você está dizendo ao navegador para iniciar uma conexão com o último host, para que ele tenha se conectado ou começado a se conectar quando encontrar o link na folha de estilo.
Mark Cilia Vincenti
3

Se você está preocupado com SEO (Otimização de mecanismos de pesquisa) e desempenho, é bom usar a <link>tag, pois ela pode pré-carregar a fonte.

Exemplo:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2" as="font" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2" as="font" crossorigin>
<style>
@font-face {
 font-family: 'Lato';
 font-style: normal;
 font-weight: 400;
 src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
 font-family: 'Quicksand';
 font-style: normal;
 font-weight: 400;
 src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>

Para mais informações, leia o seguinte: https://ashton.codes/preload-google-fonts-using-resource-hints/

Lagosta
fonte