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

190

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

através da tag link?

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

via importação em uma folha de estilo?

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

ou use o carregador de fontes da web

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

fonts webfonts google-webfonts

— kajo
fonte

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

"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

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

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

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 -

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

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

@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

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