Nas últimas semanas, por coincidência no trabalho e em projetos de terceiros, aprendi muito sobre fontes da Web, bem como sobre o Google Fonts em particular. Graças a isso, posso dar uma resposta mais detalhada a uma pergunta que me pareceu simples no passado: você deve armazenar o Google Fonts no seu servidor?Objetivamente falando, admito que as fontes não são o meu forte. Prefiro uma abordagem mais prática e não me concentro no design (consulte este site e verifique se é) e, antes disso, não sentia a necessidade de usar fontes não-padrão. Obviamente, eles parecem um pouco mais agradáveis e “marcam” o texto. Mas, para o texto principal, há pouco sentido neles. Nunca classifiquei o artigo (ou o relacionei de maneira diferente), apenas porque uma fonte bonita foi usada para enviá-lo. No entanto, eu estava ciente do impacto negativo de fontes adicionais no desempenho e na velocidade de carregamento da página; talvez, por isso, eu seja enviesado.No entanto, muitos podem discordar de mim, e as fontes, sejam importantes para mim pessoalmente ou não, são usadas regularmente por muitos outros desenvolvedores e, geralmente, elas simplesmente não têm escolha. Vamos ver o que pode ser feito para não perder a velocidade do site e deixar os designers felizes.Recursos externos e auto-hospedados
Alguns anos atrás, era considerado normal usar o CDN para conectar recursos compartilhados (por exemplo, jQuery com code.jquery.com - e sim, eles ainda o usam muito ). Para esclarecer, por CDN aqui quero dizer carregar recursos do domínio de outra pessoa, não da sua própria CDN.O motivo foi que os navegadores supostamente limitaram o número de conexões para cada domínio (geralmente para 6 conexões); portanto, usar outro domínio deu a você outras 6 conexões. Isso poderia ser verdade no passado (especialmente quando a restrição era <6 domínios) e antes do HTTPS se tornar a norma, aumentando significativamente os custos de conexão. Além disso, HTTP / 2realmente se beneficia do uso de uma conexão (principalmente!); portanto, o uso de outros domínios geralmente é uma perda de desempenho, e não uma aquisição.Outra maneira de obter o mesmo foi dividindo o domínio principal com um ou mais subdomínios técnicos (por exemplo, assets.example.com) e, nesse caso, as fontes novamente não aparecem no domínio principal, de onde sua página da web é carregada. No entanto, esse método tem os mesmos problemas de conexão, portanto, isso não pode ser chamado de ganho de desempenho, mesmo que existisse.Outra vantagem de uma CDN pública foi a alta probabilidade de os visitantes já terem essa versão do jQuery condicional no cache. Mas, novamente, estou convencido de que isso é demais. Existem muitas bibliotecas e suas versões, eO cache do navegador é menor do que parece, portanto, essa correspondência é muito improvável. Além disso, o Safari usa um cache HTTP exclusivo para cada domínio visitado, por motivos de privacidade (cache de chave dupla), e o Chrome também apresentará essa função em breve . Portanto, não há mais nada a discutir.Este tópico se transforma suavemente em uma conversa sobre o impacto de CDNs de terceiros na privacidade. Você não tem idéia de como e por que eles estão rastreando seus usuários, o que não pode acontecer com uma solução auto-hospedada. E inovações recentes na lei obrigam muitos sites a listar explicitamente todos os cookies usados no site. Não é a tarefa mais fácil ao usar CDNs de terceiros.Durante muito tempo, estou convencido de que CDNs de terceiros ou mesmo compartilhamento de seus próprios domínios estão muito longe do ganho de desempenho prometido. Com frequência, você pode encontrar sites nos quais o domínio principal distribui apenas index.html e, em seguida, perde muito tempo desperdiçando a configuração de novas conexões .Isso sem mencionar as implicações de segurança do download de recursos de sites de terceiros. Sim, existe um SRI , mas pode causar problemas inesperados , e sinceramente não entendo o ponto. Se for um recurso estático (onde você pode usar o SRI), armazene-o localmente e, se não for estático (porque o conteúdo pode mudar), não será possível usar o SRI.Além disso, o uso de recursos de fontes de terceiros ameaça que eles se tornem um único ponto de falha (SPOF) e desabilitem o site. Isso aconteceu mais de uma vez e, embora possa parecer improvável que o Google Fonts caia, ele pode ser bloqueado por proxies da empresa ou por países inteiros .Em geral, mais e mais pessoas estão aconselhando a manter seus recursos estáticos em casa , idealmente no domínio do qual você está distribuindo páginas da web. As fontes são recursos estáticos, então o mesmo se aplica a eles, certo? Bem, acontece que nem tudo é tão simples, porque as fontes têm suas próprias peculiaridades e técnicas de otimização, o que pode tornar o armazenamento local um pouco mais complicado ...Fontes do Google e como eles funcionam
O Google Fonts é um recurso incrível se você gosta de fontes. 977 fontes grátis que qualquer pessoa pode usar gratuitamente. As fontes comerciais geralmente são ridiculamente caras e geralmente licenciadas em vez de vendidas, ou seja, as taxas são cobradas com base no número esperado de visualizações de página. Portanto, ter tantas fontes gratuitas e fáceis de usar em uma coleção é muito útil.Mas isso não é tudo. O Google Fonts, como muitos provedores de recursos para sites (veja o exemplo jQuery acima), fornece CDNs e armazena fontes para que todos possam usar diretamente de seus servidores. Isso significa que você pode começar a usar fontes simplesmente adicionando uma linha de código ao site para carregar a folha de estilo:<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
Você também pode adicionar mais propriedades e fontes em uma linha para carregar várias fontes e variações de cada uma delas:<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900%7CPoppins:300,400,700,900&display=swap" rel="stylesheet">
A desvantagem é uma queda no desempenho (a vantagem também está no desempenho, mas isso não é tão óbvio, chegaremos a isso). O problema é que seu site (por exemplo, www.example.com ) carrega uma folha de estilo em fonts.googleapis.com, que retorna um CSS com regras de fonte. Aqui está a fonte do link no exemplo acima:
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/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;
}
Falaremos sobre o que algumas dessas configurações significam mais tarde (e também sobre por que existem duas regras de fonte), mas por enquanto isso significa que você pode usar essa fonte em seus estilos como este:body {
font-family: 'Lato', sans-serif;
}
No entanto, agora você precisa se conectar a fonts.googleapis.com, baixar CSS e, em seguida, conectar-se a fonts.gstatic.com e baixar as fontes em si (por que o Google não pode hospedar CSS e fontes no mesmo domínio - eu realmente não entendo!).As fontes são frequentemente detectadas pelo navegador com um atraso ao carregar a página (afinal, você precisa carregar o CSS para encontrar links para elas). Mas o Google Fonts é descoberto ainda mais tarde, porque o CSS precisa ser baixado de outro domínio e, em seguida, as fontes do terceiro domínio e, como mencionei, estabelecer uma conexão HTTPS também não é instantânea. Isso pode ser visto no diagrama em cascata abaixo gerado pelo WebPageTest (observe que todos os testes foram executados com o Chrome - 3GSlow):
A linha 1 mostra que o HTML é carregado primeiro. Então, assim que é baixado e lido em menos de 2 segundos, o navegador detecta a necessidade de carregar o CSS do Google Fonts e o carrega na linha 4. Demora um segundo para estabelecer uma conexão e, em seguida, um arquivo é baixado por 3,5 segundos. Finalmente, o navegador descobriu a existência de nossa fonte e a carregou na linha 6, tendo perdido mais 1 segundo no caminho para a conexão com o fonts.gstatic.com.Assim, o uso dessa fonte do Google Fonts nos custa três segundos inteiros de produtividade a partir do momento em que o HTML está disponível, sem levar em consideração o tempo para fazer o download da fonte!Acelerando o Google Fonts pré-carregando recursos
Você pode atenuar esse terrível impacto no desempenho ao carregar CSS e fontes de dois domínios diferentes. O primeiro domínio (para CSS) deve estar localizado mais próximo do início do arquivo index.html, para que o navegador o leia o mais rápido possível, mas o segundo ainda está oculto. No entanto, sabemos como será esse domínio (fonts.gstatic.com), para que possamos abrir a conexão com antecedência para economizar algum tempo na segunda conexão posteriormente:
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
Ao testar novamente, vemos a seguinte imagem:
Aqui vemos que a conexão na linha 5 é aberta antecipadamente, antes de carregar o CSS. Então, ganhamos mais de um segundo (baixando fontes em 4 segundos, e não 5,25), porque conseguimos evitar perder tempo durante a conexão e as fontes são baixadas imediatamente após a leitura das CSS Google Fonts.Você pode pensar em avançar e pré-carregar toda a fonte, em vez de se contentar em ingressar apenas no domínio, mas o Google Fonts chama hashes exclusivos de fontes. No exemplo acima, a fonte baixada é chamada S6uyw4BMUTPHjx4wXg.woff2, não lato.woff2, portanto, o pré-carregamento não é possível, a menos que você queira que seu site falhe um dia quando o Google decidir mudar repentinamente esse hash.De qualquer forma, se você usa o Google Fonts e não pretende fazer mais nada depois de ler esta nota, adicione pelo menos uma conexão preliminar ao domínio, caso ainda não o esteja. Essa é apenas uma linha de código e deve melhorar significativamente o desempenho da sua página.Na verdade, o Google Fonts fornece um comando semelhante nos cabeçalhos HTTP quando processa CSS:
Mas, em muitos casos, isso não ajudará muito, porque quando você recebe os cabeçalhos de resposta HTTP do servidor com CSS, o navegador já sabe que deseja se conectar a esse domínio para baixar fontes. Portanto, é melhor especificar isso no código HTML para que a pré-carga funcione mais cedo (não importa que seja duplicada dessa maneira, a segunda tentativa será simplesmente ignorada). No entanto, se sua página ainda estiver sendo processada no momento em que os cabeçalhos do servidor CSS do Google Fonts forem recebidos e o DOM não estiver pronto (talvez isso seja um sinal de muito JavaScript na sua página?), Isso poderá ajudar a melhorar o desempenho quando finalmente ficar claro qual fonte baixar.Exibição de fonte: Trocar
No código da fonte acima, você pode ver a linha display: swap; line. Esta é uma instrução relativamente nova. Ele pode ser adicionado à declaração da fonte e instruirá o navegador a usar o fallback primeiro, ou seja, a fonte do sistema (sem serifa neste exemplo) e, em seguida, substitua-a pela fonte real após o download. Dessa forma, você pode evitar atrasos no carregamento do conteúdo quando a fonte ainda não foi carregada e também melhorar o desempenho.Sim, isso leva a um surto de texto sem estilo (FOUT) - os mesmos "saltos" no conteúdo durante o carregamento da página, mas algumas pessoas não gostam (minha opinião é de opinião de que o conteúdo é mais importante que o estilo, mas o texto que salta pela página é irritante, embora isso pode ser atenuado ajustando a fonte sobressalente). Uma alternativa é o texto invisível instantâneo (FOIT). Nesse caso, o texto fica oculto até que a fonte seja exibida, o que obviamente atrasa o download e pode causar outros problemas se algum texto carregar, mas outros não !De qualquer forma, antes da introdução do font-display: swap, diferentes navegadores lidavam com isso de maneira diferente - alguns, como o IE e o Edge, usavam FOUT, outros usavam FOIT, e tinham tempos diferentes até que esperassem que as fontes esperassem. Por esse motivo, se a fonte não for carregada, seu conteúdo poderá permanecer invisível por um longo tempo. A introdução do font-display: swap permitiu que os desenvolvedores de sites decidissem por si mesmos como isso aconteceria. A maioria dos navegadores suporta exibição de fonte: swap, com exceção do IE e Edge, mas como mencionado acima, eles usam isso por padrão de qualquer maneira. As fontes do Google também oferecem suporte a várias opções de exibição de fontes e oferecem exibição de fonte: troca por padrão.Portanto, outra dica se você usar fontes do Google é verificar se possui o parâmetro & display = swap no URL e, se não tiver (apenas o suporte recente), adicione-o:Por exemplo, substitua:
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
Nisto:
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
Você também pode especificar um dos outros valores de exibição de fonte , por exemplo opcional , se desejar.Infelizmente, isso resolve apenas metade do problema. Esta instrução está em CSS, que retorna o Google Fonts, por isso é útil apenas após o download do arquivo CSS. Portanto, ajuda a lidar com o atraso ao carregar as fontes em si, mas não ajuda enquanto você aguarda o carregamento desse CSS. Portanto, essa é uma boa melhoria (pelo menos para quem prefere FOUT), mas ainda não é a solução completa como um todo.Google Fonts
I ajudou a criar Web Almanac (um olhar fantástico para o estado da Internet - ver por si mesmo se você ainda não viu ainda) e o download lento de fontes do Google em nosso site me incomodou e eu quis corrigi-lo. Especialmente FOUT com exibição de fonte: swap. Fiquei me perguntando se poderíamos reduzir o impacto disso, e a solução local parecia estar armazenando arquivos localmente, possivelmente usando pré-carregamento.Já usamos as técnicas acima (pré-carregamento e exibição da fonte: swap;), mas, é claro, seria melhor evitar conectar o CSS de fora. Sabemos o que haverá neste CSS. Então, escolha com confiança auto-hospedado? É aqui que fica interessante ...Encontrei um script conveniente no GitHub ( Google Font Download), que me ajudou a baixar todas as opções de fontes diferentes (já que havia muitas delas, até 9 dependendo da página) e, em seguida, copiou o CSS, exibido na nossa folha de estilo principal, e carregou as fontes no servidor. Existem outras ferramentas online que fazem o mesmo. Tudo parecia funcionar, e nos livramos do carregamento irritante de CSS e da necessidade de trabalhar com dois domínios.No entanto, após uma inspeção mais detalhada, notei que as fontes eram maiores:
Como você pode ver, houve um aumento significativo no tamanho (até 74% a mais para alguns deles!) Em comparação com as fontes do Google baixadas (à direita) e as fontes localmente colocadas (à esquerda). Inicialmente, pensei que isso se devia ao meu servidor web local, por exemplo, devido à desativação da compactação. Porém, as fontes WOFF2 são servidas sem compactação pelo servidor da Web - ou pelo menos deveria ser - já que o formato inclui a compactação de Brotli. Além disso, a captura de tela acima mostra os bytes baixados (preto na parte superior) e os bytes não compactados (um pouco mais claros na parte inferior) de cada coluna (eles são bastante semelhantes nas duas colunas, pois as fontes são realmente enviadas sem compressão pelo servidor da Web, mas os bytes baixados incluem cabeçalhos HTTP , então eles são um pouco maiores) e houve diferenças nos bytes compactados e descompactados. Portanto, esse não é o ponto.A comparação das regras de face da fonte obtidas usando a ferramenta com as originais revelou uma diferença: NoGoogle Fonts:
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/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;
}
Na ferramenta de download:@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src:
local('Lato Regular'),
local('Lato-Regular'),
url('Lato_400.woff2') format('woff2'),
url('Lato_400.woff') format('woff');
}
A primeira diferença é que perdemos a linha de exibição da fonte: linha de troca, mas isso pode ser corrigido sem problemas. Muito mais interessante é o fato de o Google Fonts distribuir duas fontes - e incluir diferentes intervalos Unicode. Isso ocorre devido ao subconjunto de fontes e reduz os arquivos de fontes.Subconjunto de fontes
Subconjunto de fontes é a remoção de caracteres que você não usará para reduzir o tamanho do arquivo de fontes. Normalmente, a maioria dos ocidentais usa apenas caracteres latinos, e o download de uma fonte com todos os caracteres que você provavelmente não usará é irracional. Eu já tinha ouvido falar sobre isso antes, mas nunca pensei o quão significativo isso poderia ter! O Google Fonts renderiza automaticamente uma face de fonte com um conjunto de caracteres latinos e, sempre que possível, conecta uma segunda fonte para caracteres latinos estendidos (por exemplo, Ā), que serão baixados apenas se necessário.Na verdade, você também pode solicitar uma fonte especial que contenha apenas os caracteres necessários com o parâmetro de texto:https://fonts.googleapis.com/css?family=Lato&text=ABCA julgar por outras observações, a ferramenta de carregamento de fontes que usei aparentemente suporta subconjuntos de fontes, mas apenas para todo o “idioma” (latim ou latim estendido), e combina os dois subconjuntos de caracteres em um único arquivo. No final, voltei a usar o que meu navegador usava e parei de usar essa ferramenta. Isso forneceu tamanhos de arquivo semelhantes (com uma pequena diferença devido aos cabeçalhos HTTP no meu ambiente de desenvolvimento), mas logo descobri que não se tratava apenas de subconjunto de fontes.O Google Fonts distribui fontes de maneira inteligente
As fontes do Google nem sempre processam o mesmo CSS e isso depende do agente do usuário usado . Por exemplo, para o Internet Explorer 11, ele envia o seguinte:@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wWA.woff) format('woff');
}
Aqui você pode ver que ele fornece apenas o formato WOFF, já que o IE 11 não suporta WOFF2 e, pelo mesmo motivo, o intervalo unicode não é especificado. Dá fonte-display: swap (como eu apontei na URL para CSS), embora o navegador não o suporte, mas não prejudique.Não é apenas o fabricante e a versão do navegador. Dica de fonteinclui instruções adicionais no arquivo da fonte, que são usadas para fornecer a melhor exibição da fonte - especialmente em telas de baixa resolução ou em tamanhos muito pequenos. A dica de fonte é usada no Windows, mas não no MacOS. Portanto, dependendo de qual sistema operacional você trabalha ao receber o Google Fonts, usando um navegador (mesmo se você usa o Chrome em cada plataforma), você pode obter arquivos de fonte com dicas ou sem ele. Se você baixar a versão do Windows e usá-la, você realmente fará com que os usuários do MacOS sofram com a necessidade de processar grandes arquivos de fonte cheios de dicas não utilizadas; se você fizer o oposto, provavelmente fará com que os usuários do Windows sofram com pior exibição da fonte, sem dica de fonte.Quando eu usei o Google Fonts e baixei fontes para uso local, fiz no meu Mac, para obter arquivos menores. Quando usei a ferramenta, obtive fontes completas, com dicas. Então essa foi outra razão para a grande diferença de tamanho!A dica de fonte ainda é relevante, porque as telas de alta definição se tornaram mais comuns - essa é uma boa pergunta e muitas fontes são entregues inicialmente sem sugestões, pois leva muito tempo para criá-las. Quando está presente, pode aumentar significativamente o tamanho da fonte. No caso de Lato, o tamanho é dobrado. Vale a pena a carga de trabalho extra que você encontrará ao abandonar as Fontes do Google e localizar fontes localmente? Essa é outra decisão que você precisa tomar para si mesmo.Portanto, o CDN do Google Fonts é suportado por um script inteligente que fornece as fontes mais adequadas, otimizando-as para manter o desempenho máximo. Ao mudar para o armazenamento local de fontes, você terá que configurar tudo isso por conta própria e, em alguns navegadores, poderá perder a exibição correta de suas fontes em alguns navegadores.Para o Web Almanac, analisamos as estatísticas dos navegadores dos visitantes e decidimos dar suporte apenas ao WOFF2, além de usar versões do MacOS sem dar dicas, pois elas pesam metade do mesmo. Este CSS simplificado (especialmente porque o intervalo unicode é suportado por todos os navegadores que suportam WOFF2), e os usuários do IE 11 e outros navegadores antigos veem o sans-serif por padrão, o que não parece muito bom, mas, em nossa opinião, as fontes são uma melhoria progressiva e, mesmo sem eles, o site ainda é mais do que utilizável. Além disso, navegadores mais antigos podem até se beneficiar do uso de fontes padrão do sistema, pois provavelmente serão usadas em máquinas mais antigas e de baixa potência.Você também pode fazer outros ajustes nas fontes usadas, se desejar (verifique as licenças primeiro!). Mas copiar as fontes padrão do Google usadas no Chrome no MacOS provavelmente é suficiente para a maioria de nós, se você quiser suportar apenas navegadores WOFF2 sem dar dicas. .No entanto, se adotássemos o Google Fonts, teríamos WOFF (e formatos ainda mais antigos) e dicas sempre que necessário, sem a necessidade de configuração profunda da substituição da fonte correta, dependendo do navegador. Portanto, o uso das fontes do Google para fontes ainda tem certas vantagens e, ao escolher o armazenamento local, você as recusa. Isso também se aplica a quaisquer aprimoramentos futuros no Google Fonts .Aprimoramentos de fontes futuras
Ao me aprofundar no assunto das fontes e avisar que você poderá perder quaisquer benefícios futuros do Google Fonts acessando o armazenamento local, quero me afastar um pouco do tópico principal e falar sobre outras coisas interessantes que descobri. Quais são as próximas grandes mudanças no mundo das fontes? Bem, há duas alterações que estão sendo discutidas ativamente no momento e que podem afetar fontes no futuro (e, portanto, podem ser suportadas pelo Google Fonts, talvez por padrão, se você optar por usar este serviço): fontes variáveis e enriquecimento progressivo de fontes .Fontes variáveis
As fontes variáveis permitem usar diferentes estilos de fonte sem precisar fazer o download de arquivos individuais. Mencionei anteriormente que o Web Almanac usa até 9 arquivos de fontes diferentes, mas na realidade são apenas 2 fontes. O motivo é simples - o site também usa versões em negrito, itálico, negrito e até mais fina de um ou de ambos. Muitas variações da mesma fonte podem parecer inadequadas e você pode pensar que o próprio navegador lidará com a tarefa de alterar a espessura do texto ou escrever em itálico. Sim, é possível. Mas cada navegador faz isso de maneira um pouco diferente, e os resultados podem ser radicalmente diferentes , muitos chamam de "fontes artificiais".A única maneira de garantir a mesma exibição é usar uma "fonte real" especificamente para cada estilo que você precisa.Fontes variáveis padronizam a exibição de várias variações de fontes e a necessidade de arquivos adicionais desaparece. Teoricamente, poderíamos substituir essas 9 fontes por 2 quando suas versões de fontes variáveis estiverem disponíveis.Isso abre inúmeras possibilidades para o uso de fontes na Internet. Embora possa me parecer que as 9 opções para as duas fontes são demais, na realidade não é demais, enquanto as fontes variáveis permitiriam variações infinitas. Em dispositivos móveis, você pode definir uma espessura ligeiramente diferente para o "negrito" do que em computadores e tablets. Fontes variáveis com algumas instruções CSS simplespermita isso sem o custo de recursos para baixar uma fonte adicional. Recentemente, no DotCSS, Jason Pamental falou sobre fontes variáveis e demonstrou como você pode obter uma página lindamente projetada com o que parece haver muitas fontes diferentes - todas usando um único arquivo!Usar fontes variáveis também significa carregar todas as variações de fontes ao mesmo tempo , evitando a confusão causada pelos problemas mencionados anteriormente. Isso também leva a menos redesenhos do layout: sem fontes variáveis, a página será redesenhada pelo navegador repetidamente à medida que cada variante de fonte individual é carregada.Fontes variáveis têm bom suportenos navegadores modernos, mas sua desvantagem é o tamanho grande, porque o armazenamento de variações de fontes diferentes requer mais espaço, como é o caso das dicas de fontes. Depende da fonte, mas geralmente elas são duas vezes maiores após a compactação; portanto, para justificar seu uso, você precisa de pelo menos dois estilos. Mesmo assim, é melhor você preferir um arquivo menor carregado para exibir texto crítico, em vez de um arquivo maior para exibir todo o texto. E, novamente, o uso do display de fonte: swap pode ser uma solução menos problemática? Cabe a cada proprietário do site decidir!Enriquecimento progressivo de fontes
O enriquecimento progressivo de fontes , em essência, leva a subconjunto a um novo nível e permite que você baixe definições de caracteres adicionais, conforme necessário, na forma de um fluxo de informações adicionais que complementam a fonte carregada no momento, mas não adicionam outra. Isso pode parecer uma pequena vantagem para nós, ocidentais, mas para outros idiomas - especialmente no Extremo Oriente - os arquivos de fonte podem ser muito grandes (por exemplo, 2Mb ), devido ao grande número de caracteres nesses idiomas. Por esse motivo, as fontes da Web são menos usadas nesses países e o enriquecimento progressivo das fontes pode ter um efeito positivo na situação.O enriquecimento progressivo de fontes, como eu o entendo, está em um estágio muito anterior às fontes variáveis, mas existemdemonstração online . De qualquer forma, essa é outra alteração potencialmente interessante relacionada a fontes.O Google Fonts continuará melhorando?
Dado o funcionamento do Google Fonts, é fácil imaginar que ele pode continuar a crescer com novos aprimoramentos, como os descritos neste artigo (ou muitos outros!), Apenas alterando o CSS fornecido. E ele pode fazer isso com sabedoria. Por exemplo, determinar se o seu navegador suporta novas tecnologias (como acontece agora com o formato da fonte - WOFF ou WOFF2) ou de outras maneiras. Por exemplo, se você solicitar mais de duas fontes e fornecer uma fonte variável com menos recursos, poderá automatizar e vincular ao mesmo arquivo de fonte em vários anúncios de fonte e, se solicitar apenas uma opção, consulte uma mais leve, fonte tradicional. Parece rebuscado? Eles já fizeram isso com uma fonte.(Oswald)! Honestamente, não sei se o mesmo é possível com o enriquecimento progressivo de fontes, porque não entendo completamente o princípio de seu trabalho, mas será interessante ver.Além disso, vale ressaltar que, ao usar fontes do Google, ao atualizar fontes, por exemplo, para adicionar novos conjuntos de caracteres ou corrigir erros nos glifos, você obtém novas fontes automaticamente. Com o armazenamento local, isso não funcionará - pelo menos não sem a intervenção de uma mão. Talvez você possa procurar na direção de solicitações de proxy através do seu domínio e, assim, aproveitar o melhor das duas opções, mas isso provavelmente será mais lento e exigirá configuração e gerenciamento adicionais.Por outro lado, o armazenamento local fornece estabilidade, pois algumas atualizações podem afetar seu design, por exemplo, se um título em uma linha começar a se estender para dois devido a uma alteração na fonte. Há uma categoria de pessoas que estão muito chateadas por causa dissoBenefícios do armazenamento de fontes locais
Portanto, discutimos muita teoria e, embora haja óbvios benefícios potenciais do armazenamento local, também há dificuldades a serem consideradas e, portanto, o uso do Google Fonts também traz alguns benefícios óbvios. Então, o auto-hospedado vale a pena? Depende das comodidades reais em uma situação específica. Se a diferença de desempenho for insignificante, pode valer a pena continuar usando o Google Fonts, se grande, respectivamente.Para o Web Almanac, recentemente selecionamos o armazenamento local do Google Fonts e os testes mostraram mudanças drásticas:
A imagem inferior contém fontes locais em nosso servidor de teste e você pode ver que o tempo de download foi reduzido pela metade - de 6 a 3 segundos! Após uma análise mais profunda, vi que a produtividade aumentou ainda mais (3 ⅓ segundos de economia)!O que não é tão óbvio (mas o que veremos mais adiante) - neste momento, as fontes não estão totalmente carregadas em nenhuma das imagens - com o armazenamento local, são necessários 7,5 segundos e 10,5 segundos ao usar o Google Fonts. No entanto, as fontes usadas são bastante semelhantes às padrão, e não há saltos visíveis no layout. Isso pode ser visto no diagrama abaixo:
O diagrama mostra que a página com armazenamento local (em vermelho) é quase completamente carregada em 2,4 segundos e depois é atualizada várias vezes à medida que as imagens são carregadas, após o que as fontes também são exibidas. Sim, eu gostaria de tornar tudo ainda mais suave, mas ainda é impossível otimizar alguns custos de download de fontes.A razão pela qual as melhorias são realmente tangíveis é por causa de mais uma coisa que eu não levei em consideração no início: a CSS bloqueia a renderização. Portanto, se houver um link para o CSS do Google Fonts, o navegador não atrasa apenas a exibição do texto - atrasa a exibição de todo o conteúdo da página! A fonte é uma melhoria progressiva, para que possamos renderizar com segurança o restante da página e até o próprio texto (com fontes padrão / de fallback), mas o navegador não - apenas vê que há algum CSS e tenta carregá-lo, adiando o download o resto da página. Não há carregamento assíncrono para CSS- mas talvez deva ser para esses casos? No entanto, corremos o risco de que, em caso de problemas na conexão com o Google Fonts, todo o site fique inacessível até que o navegador pare de tentar processar o link!
No gráfico de comparação acima, a linha verde vertical da Renderização inicial já ocorre após 6 segundos - já que ele precisa esperar até o CSS do Google Fonts carregar na linha 12, gastando metade do tempo conectando-se ao domínio e a outra metade realmente carregando.Compare isso com a versão local:
aqui podemos começar a renderizar assim que o CSS do site for carregado e processado em 2,5 segundos. Isso ocorre porque não há atraso na conexão com o domínio do Google Fonts.Nos dois casos, vemos que o início da renderização acontece antes do carregamento das fontes e, graças à mágica da exibição da fonte: swap, o texto ainda está visível. Portanto, pelo menos ao usar font-display: swap, seria melhor se o Google Fonts não fosse carregado com renderização de bloqueio CSS, mas, por exemplo, carregado via JavaScript assíncrono, que insere fontes CSS na página somente após como eles são baixados. Se o processo fosse implementado dessa maneira, os atrasos na renderização não ocorreriam, no entanto, ainda haverá atrasos na conexão e uma longa espera para que o texto seja exibido corretamente.UPD: Criei um problema no GitHub Google Fonts com uma proposta para adicionar uma maneira de baixar o Google Fonts sem bloquear a renderização - vote se você também quiser!Zach Leatherman defende essa abordagem para reduzir o número de redesenhos e mostra que isso também é possível apenas com JavaScript, sem a necessidade de um arquivo CSS. Em seguida, mostra outras vantagens de gerenciar suas fontes com JavaScript, por exemplo, você pode recusar o download de fontes, se o site estiver aberto em uma rede lenta (usando a API de informações de rede ) ou se o usuário tiver as configurações de Salvar dados ou Preferir movimento reduzido ativadas . Recursos interessantes!Pré-carregando fontes
Depois de se afastar dos URLs com hash do Google, você poderá pré-carregar a fonte para melhorar ainda mais o desempenho. No entanto, essa opção tem algumas falhas em potencial, como Andy Davies discutiu no artigo Preloading Fonts e the Puzzle of Priorities . Basicamente, ao pré-carregar as fontes e movê-las para cima na ordem de prioridade, você reduz implicitamente a prioridade de outros downloads críticos (por exemplo, CSS) e, devido a um erro no Chrome, as fontes podem até ultrapassar algumas delas.Além disso, o pré-carregamento quando a fonte não será usada causará carga desnecessária desnecessária - por exemplo, se a versão local existir e puder ser usada com prioridade ou se o navegador não suportar esse formato de fonte (embora todos os navegadores que suportam o pré-carregamento também ofereçam suporte a WOFF2 ) Juntamente com a recomendação de usar o pré-carregamento, o Google avisa claramente sobre isso , e é bom ver que eles prestam atenção.Ao usar a função font-display: swap, a necessidade de pré-carregamento pode não ser tão forte. Embora, nesse caso, você ainda possa ganhar tempo baixando o número mínimo necessário de fontes e evitando FOUT e redesenho. No momento, não usamos pré-carregamento no Web Almanac e, antes de começar, precisamos de mais alguns testes, mas por enquanto estou satisfeito com o que é.Conclusão
Respondendo a uma pergunta no título do artigo: sim, vale a pena, pois o ganho de desempenho é significativo. Obviamente, seus resultados podem variar, porque tudo depende do site específico, portanto teste, teste e teste novamente. Mas acho que ainda é a melhor opção, em termos de desempenho, para a maioria dos sites.No entanto, o Google Fonts não é apenas um repositório de centenas de fontes gratuitas - é também um mecanismo de entrega inteligente que usa muitas das mais recentes técnicas de otimização para renderizar as fontes mais adequadas com o mínimo esforço por parte do proprietário do site. Ao mudar para auto-hospedado, idealmente, é necessário reimplementar muitas melhorias úteis, como exibição de fonte: troca, remoção de dicas de fontes (pelo menos em alguns navegadores) ou, caso contrário, você só pode prejudicar o desempenho de outras pesadas. arquivos de fonte.Esta não é uma tarefa fácil (e o Google Fonts faz isso por você, sim). Mas como agora usar apenas o formato WOFF2 é a única opção realista e os navegadores suportam a maioria das técnicas de otimização, tudo ficou muito mais fácil do que antes. No entanto, vale a pena ter algum conhecimento sobre fontes da Web antes de configurar tudo (espero que este post tenha ajudado!). E, ao mesmo tempo, fique de olho nas novas mudanças no mundo das fontes, pois sem dúvida haverá outras melhorias.Bem, talvez estivéssemos muito interessados em otimização e, com o armazenamento local, podemos usar a fonte completa, sem subconjuntos e com dicas? No site do Google Fonts, é possível fazer o download de qualquer fonte e é relativamente simples, embora seja estranho que o arquivo não inclua os WOFF e WOFF2ao usar esse método de carregamento, que é completamente incompreensível para mim! No entanto, se você está realmente interessado em melhorar o desempenho (e deveria estar interessado!), Tente fazer a coisa certa. Este artigo mostra apenas que é um pouco mais complicado do que apenas baixar e colocar fontes no seu site, como eu sempre esperava.Uau, algo acabou sendo mais longo do que eu esperava! Espero que você tenha o mesmo interesse em entender o tópico e que agora tenha algumas novas idéias para acelerar o download de fontes em seu site. Eu recomendo que você siga Jason e Zach no Twitter para saber mais sobre fontes e Andy para saber mais sobre a velocidade geral dos aplicativos Web.