Ajuste seus arquivos de fonte e otimize sua estratégia de carregamento para velocidade máxima + FOUT mínimo
Em meu post anterior, eu escrevi sobre as fontes do sistema e suas vantagens sobre as fontes da web. Eu incentivei uma abordagem de ‘fontes do sistema primeiro’ , argumentando que, em comparação com as fontes do sistema, as fontes da web (a) podem afetar negativamente o desempenho, (b) usar mais dados e (c) aumentar o consumo de energia do seu site. Mas uma web sem fontes da web seria muito menos interessante – talvez usando fontes da web com um pouco mais de responsabilidade , possamos obter todos os seus benefícios, ao mesmo tempo que minimizamos as desvantagens.
Na primeira parte deste guia, irei cobrir os cinco métodos para melhorar o desempenho das fontes da web que acho que oferecem os maiores ganhos com o mínimo de esforço.
O crédito vai para Zach Leatherman, que escreveu longamente sobre as fontes da web em seu site. Todos os seus artigos valem a pena ler, especialmente The Font Loading Checklist e A Comprehensive Guide to Font Loading Strategies (que de fato é muito abrangente), ambos os quais foram muito úteis enquanto eu estava escrevendo este post.
Nesta postagem, usarei dois termos que costumam ser usados alternadamente, mas que tradicionalmente se referem a coisas diferentes:
- Uma fonte é uma família completa de fontes que compartilham um design comum. Um tipo de letra pode incluir qualquer número de pesos ou estilos (e nos dias de metal físico ou tipo de madeira, tamanhos também). Helvetica é um exemplo de fonte. Você pode pensar em uma fonte como uma família de fontes.
- Uma fonte é um peso e estilo únicos de uma fonte. Com o tipo físico, cada fonte viria em sua própria caixa contendo glifos de tamanho, peso e estilo específicos. por exemplo, ’10 pontos Helvetica Bold Italic ‘. O design baseado em vetor de fontes digitais modernas permite que uma única fonte seja escalada para cima e para baixo infinitamente, mas você ainda precisará de um arquivo separado para cada peso e estilo (a menos que você esteja usando fontes variáveis, mas isso é um tópico por parte dois).
1. Use os formatos de arquivo mais modernos
O Web Open Font Format 2.0 ( woff2 ) é, até o momento, o menor e mais eficiente formato de arquivo para fontes da web. Ao usar @font-faceat-rules em seu css , certifique-se de que a fonte woff2 apareça antes de formatos de arquivo mais antigos e menos eficientes, como ttf . O navegador usará a primeira fonte da lista que entender, mesmo se for um arquivo maior.
@font-face {
font-family: 'Typefesse';
src: url('typefesse.woff2') format('woff2'),
url('typefesse.woff') format('woff');
}A menos que você precise oferecer suporte ao IE8, você não precisa de nada além de woff2 e woff . Se você não precisa de suporte para IE11, você só precisa de woff2 .
Se você tiver apenas um arquivo ttf (por exemplo, se você baixou a fonte do Google Fonts), precisará convertê-lo usando uma ferramenta como o Online Font Converter . Se você não estiver usando uma fonte com uma licença totalmente aberta, primeiro verifique se a licença permite isso.
2. Use o font-displaydescritor
Existem dois acrônimos que você verá muito quando começar a se aprofundar nas estratégias de carregamento de fontes:
- Flash de texto invisível ( foit ) é o período de tempo em que o texto fica invisível antes que o navegador baixe uma fonte da web.
- Flash of sem estilo de texto ( fout ) é o período de tempo em que o texto é processado em uma fonte fallback antes de o navegador tenha baixado uma fonte web.
Nenhuma delas é ideal, mas se você estiver usando fontes da web, uma delas provavelmente vai acontecer na primeira vez que um usuário visitar seu site (com sorte, no segundo carregamento de página, o navegador será capaz de servir as fontes de seu cache). Se pegarmos nossa regra de face de fonte de antes e adicionar um descritor de exibição de fonte , podemos dizer ao navegador qual preferimos.
@font-face {
font-family: 'Typefesse';
src: url('typefesse.woff2') format('woff2'),
url('typefesse.woff') format('woff');
font-display: swap;
}Existem cinco valores possíveis para font-display: o primeiro, autoé o comportamento padrão do navegador (a maioria dos navegadores prefere foit ). Aqui estão os outros quatro:
trocar
swapinforma ao navegador que queremos mostrar o texto usando uma fonte substituta até que a fonte da web seja carregada (ou seja, preferimos uma fout ). Independentemente de levar 5 segundos ou 5 minutos, assim que a fonte for carregada, ela será trocada. Essa é uma boa base porque permite que os visitantes do site comecem a ler seu conteúdo imediatamente, mas certifique-se de escolher um substituto semelhante (nós ‘ (cobrirá os substitutos na parte dois desta série) para evitar uma grande mudança de layout quando as fontes forem trocadas.
quadra
Se preferirmos que o navegador oculte o texto até que a fonte da web seja carregada (ou seja, preferimos um foit ), podemos usar font-display: block. O texto não permanecerá invisível para sempre: se a fonte não carregar dentro de um determinado período (geralmente três segundos), o navegador usará a fonte substituta de qualquer maneira, trocando pela fonte da web assim que ela for carregada.
Se esta lhe parece a melhor opção porque você acha que o fout parece ruim, lembre-se que quando o texto está invisível, sua página não pode ser usada e seu conteúdo não pode ser lido.
cair pra trás
fallbacké semelhante a swapcom duas diferenças:
- Ele começa com um período de ‘bloco’ incrivelmente pequeno (~ 100ms) em que o texto é oculto, após o qual mostra a fonte substituta.
- Se a fonte da web não carregar em um curto período (~ 3s), a fonte substituta será usada pelo resto da vida útil da página.
Se você não está preocupado se o usuário vê sua fonte da web na primeira vez que visita seu site (é provável que ele não esteja tão preocupado), fallbacké uma boa escolha.
opcional
optionalé semelhante a fallback, mas dá à fonte um período de tempo extremamente curto (~ 100ms) para carregar, após o qual não será trocada. No entanto, ele possui um recurso adicional que permite ao navegador decidir abortar a solicitação de fonte se a conexão for muito lenta para que a fonte seja carregada.
Cada fonte em sua página terá seu próprio período foit / fout – as fontes são trocadas individualmente conforme são carregadas, não quando todas são carregadas. Isso pode levar a algum comportamento infeliz (consulte o problema da fonte da Web de Mitt Romney ). Para obter controle total sobre o carregamento de fontes, você precisará examinar as soluções JavaScript (que abordaremos na parte 2).
3. Pré-carregue seus arquivos de fonte
Para minimizar o período foit / fout , queremos carregar nossos arquivos de fonte da web o mais rápido possível. Usando <link rel="preload">em nosso html <head> , podemos dizer ao navegador para começar a buscar nossas fontes mais cedo. Adicione a seguinte tag na parte superior do seu <head>(antes de qualquer css ), definindo o hrefatributo para o url do seu arquivo de fonte:
<link rel="preload" href="/typefesse.woff2" as="font" type="font/woff2" crossorigin>Ao adicionar essa tag, estamos informando ao navegador para começar a carregar nosso arquivo de fonte imediatamente, ao passo que normalmente ele não começaria até que fosse encontrada uma referência à fonte específica em seu css e encontrado um elemento dom que a usa.
Os navegadores geralmente são inteligentes o suficiente para baixar fontes apenas se forem necessárias na página atual. O uso preloadsubstitui esse comportamento, forçando o navegador a baixar uma fonte, mesmo que ela não seja usada. Por este motivo, sempre pré- carregue um único formato de cada fonte ( woff2 se você tiver).
Quanto mais fontes você pré-carrega, menos benefício você obterá desta técnica, então priorize as fontes que aparecem ‘acima da dobra’ (a primeira que 100vho usuário vê sem rolar).
Você pode ler mais sobre o pré-carregamento neste artigo de Yoav Weiss: Pré-carregamento: para que serve?
4. Subconjunto de seus arquivos de fonte
Ao subdividir uma fonte, podemos gerar um novo arquivo de fonte menor que inclui apenas os glifos (um glifo é um caractere ou símbolo individual) de que precisamos. Usei a ferramenta Font Subsetter em Everything Fonts para criar um subconjunto da fonte usada para os títulos deste site, Space Grotesk Bold, para incluir apenas caracteres no intervalo ‘Latim básico’. Isto reduziu o tamanho do arquivo do woff2 versão de 30kB apenas 7kB.
Subsetting é uma ferramenta poderosa, mas vem com algumas desvantagens potenciais. Se você está construindo um site que exibe conteúdo gerado pelo usuário, nomes de pessoas ou nomes de lugares, você deve considerar outros caracteres além das 26 letras padrão, 10 números e um punhado de símbolos comuns na escrita em inglês.
No mínimo, você deve pensar em diacríticos: glifos que aparecem acima ou abaixo de um caractere que alteram sua pronúncia. Eles são comuns em idiomas como francês, espanhol, vietnamita, bem como texto transliterado (ou ‘romanizado’) de alfabetos como grego ou hebraico; eles também aparecem em empréstimos (palavras adotadas de outro idioma).
Se você criar um subconjunto muito agressivo, poderá até acabar com uma mistura de fontes na mesma palavra.
Felizmente, você não precisa verificar manualmente cada página do seu site em busca de glifos diferentes. O Glyphhanger é uma ferramenta de linha de comando que faz duas coisas: em primeiro lugar, ele examina suas páginas da web e determina os intervalos de caracteres Unicode usados (esses intervalos correspondem a um script ou idioma. Por exemplo, ‘Latim básico’, ‘Cirílico’, ‘Tailandês’) ; em segundo lugar, ele subconjunto de um arquivo de fonte, gerando uma nova versão contendo apenas os caracteres nos intervalos especificados.
Pode ser um pouco complicado começar a usar o Glyphhanger (você precisará do python e do pip) – Sara Soueidan explica como fez isso funcionar aqui: Como configurei o Glyphhanger no macOS para otimizar e converter arquivos de fonte para a web .
Assim como acontece com a mudança de formatos de arquivo, certifique-se de que a licença da fonte permite subconjuntos.
5. Auto-hospedar suas fontes
Esta não é uma regra universal como a maioria dos outros pontos aqui. Existem dois bons motivos pelos quais você pode querer usar um serviço hospedado como Google Fonts ou Adobe Fonts :
- Geralmente, eles são a maneira mais barata ou a única forma legal de usar determinados tipos de fontes na web: se você não tiver escolha a não ser usar um desses serviços, descubra se ele oferece suporte para subconjuntos ou adição de
font-displaydescritores. - Eles são convenientes: copiar e colar uma linha de html em seu site
<head>será mais rápido do que a alternativa: baixar arquivos de fonte, converter e subdividir arquivos de fonte e, em seguida, escrever@font-faceat-rules para cada peso e estilo.
Se você ainda estiver usando o Google Fonts apenas por causa da conveniência, dê uma olhada em google-webfonts-helper . Esta ferramenta permite que você crie um pacote de fontes da web personalizado a partir do conjunto completo de fontes do Google, defina os pesos e conjuntos de caracteres necessários e, em seguida, oferece um único download contendo todos os arquivos css e de fonte (nos formatos mais recentes) de que você precisa.
Fonte da web Mito nº 1
Você pode ter ouvido a afirmação (que é repetida pelo Google Fonts [1] ) de que se um usuário já visitou um site que carrega as mesmas fontes da mesma fonte, o navegador não precisa baixá-las novamente porque elas estão em cache.
Isso pode ter sido verdade, mas não consigo encontrar nenhuma evidência de que seja uma ocorrência regular o suficiente para fazer uma diferença real. Na verdade, tanto o Google Chrome quanto o Safari explicitamente impedem o compartilhamento de recursos de terceiros em cache em diferentes domínios devido a questões de rastreamento [2] .
Aqui está uma lista de bons motivos para não usar um serviço hospedado e, em vez disso, hospedar suas fontes:
Desempenho
As pesquisas de domínio demoram; você pode usar preconnectdicas de recursos para atenuar o problema, mas sempre haverá uma penalidade de desempenho para abrir uma conexão tcp para um novo domínio. Pode ser por isso que alguns dos próprios sites do Google (incluindo web.dev ) agora usam fontes auto-hospedadas em vez de fontes do Google.
Privacidade
Serviços pagos de fontes da Web, como Adobe Fonts, precisam detectar visualizações de páginas para fins de cobrança, mas podem estar coletando mais dados do que o estritamente necessário. Se você puder escolher, carregue suas fontes usando css ( <link rel="stylesheet">), em vez de JavaScript ( <script>), para minimizar a quantidade de dados que terceiros podem coletar sobre seus usuários.
O Google Fonts não parece coletar muito sobre os visitantes do site além de endereços IP e strings de agente do usuário, mas o Google não está agindo de forma totalmente altruísta ao fornecer o serviço gratuitamente. Cada um dos cinquenta trilhões [3] de visualizações de página usando Google Fonts é um ponto de dados que o Google não teria se os sites escolhessem usar fontes auto-hospedadas.
Ao controle
Com fontes auto-hospedadas, você tem controle total sobre exatamente como carrega suas fontes, o que permite servir subconjuntos personalizados, definir font-displayconfigurações e especificar por quanto tempo o navegador deve armazenar em cache os arquivos de fontes.
Confiabilidade
Os serviços de terceiros podem sofrer lentidão, interrupções ou encerrar completamente . Ao hospedar suas fontes por conta própria, enquanto seu site estiver ativo, suas fontes estarão disponíveis.