Em um post anterior, eu escrevi sobre as fontes do sistema e suas vantagens sobre as fontes da web. Apoiei a abordagem "fontes do sistema primeiro", argumentando que, comparadas às 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 de forma mais responsável, podemos obter todos os seus benefícios, minimizando as desvantagens.
Na primeira parte deste tutorial, abordarei cinco métodos para melhorar o desempenho de fontes da web que acho que terão o maior impacto com o mínimo de esforço.
Crédito para Zach Leserman, que escreveu extensivamente sobre 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 é realmente muito abrangente), os quais provaram ser muito úteis enquanto eu estava escrevendo este post.
, , :
(typeface) — , . ( , , ). Helvetica — . .
(font) — . , , , , «Helvetica Bold Italic 10 ». , ( , ).
1.
O Web Open Font Format 2.0 (woff2) é o menor e mais eficiente formato de arquivo para fontes da web no momento da escrita. Ao usar @ font-face at-rules em CSS, certifique-se de que a fonte woff2 seja renderizada 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'); }
Se você não precisa do suporte do IE8, não precisa de nada além de woff2 e woff. Se você não precisa do suporte do IE11, precisa apenas do woff2.
Se você tiver apenas um arquivo ttf (por exemplo, se você baixou uma fonte do Google Fonts), precisará convertê-lo usando uma ferramenta como o Online Font Converter . Se você não estiver usando uma fonte totalmente aberta, primeiro verifique se a licença permite.
2. Use o descritor de exibição de fontes
Existem dois acrônimos que você verá com frequência quando começar a entender as estratégias de carregamento de fontes:
- Flash de texto invisível (foit) é o período de tempo durante o qual o texto fica invisível antes que o navegador carregue a fonte da web.
- Flash de texto sem estilo (fout) é o período de tempo em que o texto é renderizado usando a fonte substituta antes que o navegador carregue a fonte da web.
Nenhuma das opções acima é perfeita, mas se você estiver usando fontes da web, é provável que isso aconteça na primeira vez que um usuário visitar seu site (com sorte, quando a segunda página carregar, o navegador será capaz de exibir as fontes de seu cache). Se pegarmos nossa face de fonte at-rule da anterior 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 de exibição de fonte possíveis: primeiro, auto é o comportamento padrão do navegador (a maioria dos navegadores prefere foit). Aqui estão mais quatro:
trocar
swap diz ao navegador que queremos que o texto seja exibido usando a fonte substituta até que a fonte da web seja carregada (ou seja, preferimos usar fout). Independentemente de levar 5 segundos ou 5 minutos, assim que a fonte for baixada, ela será substituída. Esta é uma boa base porque permite que os visitantes do site comecem a ler seu conteúdo imediatamente, mas certifique-se de selecionar uma opção semelhante (nós: na parte dois desta série de artigos, abordaremos as opções de fallback) para evitar grandes desalinhamentos de layout quando alterar fontes.
quadra
Se preferirmos que o navegador oculte o texto até que a fonte da web seja carregada (ou seja, preferiríamos foit), podemos usar font-display: block. No entanto, o texto não ficará invisível para sempre: se a fonte não carregar por um determinado período (geralmente três segundos), o navegador ainda usará a fonte reserva, substituindo-a pela fonte da web após o carregamento.
Se você acha que esta é a melhor opção porque você acha que a imagem 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 ao swap, com duas diferenças:
- Ele começa com um período de "bloco" incrivelmente pequeno (~ 100 ms) quando o texto é oculto, após o qual a fonte alternativa é exibida.
- Se a fonte da web não carregar por um curto período de tempo (~ 3 s), a fonte substituta será usada até o final da página.
Se você não estiver preocupado se um usuário verá sua fonte da web na primeira vez que visitar seu site (provavelmente ele não se preocupa muito com isso), o substituto é uma boa escolha.
opcional
opcional é semelhante a fallback, mas dá à fonte um período de tempo muito curto (~ 100 ms) para carregar, após o qual não será substituída. 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 carregar a fonte.
foit/fout — , . ( . - Mitt Romney). JavaScript ( ).
3.
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 no topo do seu
head
(antes de qualquer css) definindo um atributo
href
para a url do seu arquivo de fonte:
link rel="preload" href="/typefesse.woff2" as="font" type="font/woff2" crossorigin
Ao adicionar esta tag, estamos dizendo ao navegador para começar a baixar nosso arquivo de fonte agora, enquanto normalmente não comece até que encontre o link para uma fonte específica em seu CSS e não encontre o elemento dom que o usa.
Os navegadores geralmente são inteligentes o suficiente para carregar fontes apenas quando necessário na página atual. Usar o pré-carregamento substitui esse comportamento, forçando o navegador a baixar a fonte mesmo quando não estiver em uso. Por esse motivo, sempre pré-carregue apenas um formato de cada fonte (woff2, se houver).
Quanto mais fontes você pré-carrega, menos benefícios você obterá com este método, então prefira fontes que aparecem “acima da dobra” (os primeiros 100vh que o usuário vê sem rolar).
Você pode ler mais sobre o pré-carregamento neste artigo de Yoav Weiss: Pré-carregamento: para que serve?
4. Pegue os arquivos de fonte
Ao criar um subconjunto da fonte, podemos gerar um novo arquivo de fonte menor que inclui apenas os glifos (um glifo é um único caractere ou caractere) de que precisamos. Usei a ferramenta Font Subsetter em Everything Fonts para corresponder à fonte Space Grotesk Bold usada para os títulos deste site para incluir apenas caracteres latinos básicos. Isso reduziu o tamanho do arquivo da versão woff2 de 30 KB para 7 KB.
O subconjunto é uma ferramenta poderosa, mas tem algumas desvantagens potenciais. Se estiver criando um site que exibe conteúdo gerado pelo usuário, nomes de pessoas ou nomes de lugares, você deve usar caracteres diferentes das 26 letras padrão, 10 números e alguns caracteres 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 e texto transliterado (ou "romanizado") de alfabetos como grego ou hebraico; eles também aparecem em palavras emprestadas (palavras tiradas de outro idioma).
Se você estiver definindo demais os subconjuntos, pode até acabar com uma combinação de fontes em uma palavra.
Se eu quiser escrever sobre o do-it-yourselfer, talvez precise personalizar o arquivo de subconjunto de fontes que uso para os títulos. Observe como as formas "â" e "é" (com acentos) não correspondem às versões não acentuadas dessas letras.
Felizmente, você não precisa verificar manualmente cada página do seu site em busca de caracteres diferentes. GlyphhangerÉ uma ferramenta de linha de comando que faz duas coisas: primeiro, rastreia suas páginas da web e determina os intervalos de caracteres Unicode em uso (esses intervalos correspondem ao script ou idioma, por exemplo, latim básico, cirílico, tailandês); em segundo lugar, é um subconjunto do arquivo de fonte, gerando uma nova versão contendo apenas caracteres dos intervalos especificados.
Começar a usar o Glyphhanger pode ser um pouco complicado (você precisa do python e do pip) - Sarah Sueidan explica como fez isso neste artigo: 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 sua licença de fonte permite um subconjunto de.
5. Coloque você mesmo as fontes
Esta não é uma regra universal, como a maioria das outras. Existem dois bons motivos pelos quais você pode querer usar um serviço hospedado como Google Fonts ou Adobe Fonts :
Esta é geralmente a maneira mais barata ou a única forma legal de usar certos tipos de fontes na Internet. Se você não tem escolha a não ser usar um desses serviços, veja se ele oferece suporte para subconjuntos ou adição de descritores de exibição de fontes.
Eles são úteis: copiar e colar uma linha de html em seu site será mais rápido do que a alternativa: baixar os arquivos de fonte, converter e subconjunto dos arquivos de fonte e, em seguida, escrever @ font-face at-rules para cada peso e estilo.
Se você ainda estiver usando o Google Fonts apenas por conveniência, dê uma olhada em google-webfonts-helper . Esta ferramenta permite que você crie seu próprio pacote de fontes da web a partir do conjunto completo de fontes do google, defina os pesos e conjuntos de caracteres desejados e, em seguida, forneça um download contendo todos os arquivos css e fontes (nos formatos mais recentes) de que você precisa.
Mito nº 1 sobre as fontes da web Você
pode ter ouvido a afirmação (que é repetida no Google Fonts) de que se um usuário já visitou um site que faz download das mesmas fontes da mesma fonte, o navegador não precisa fazer o download novamente porque elas são armazenados em cache ...
Uma vez que isso pode ter sido verdade, mas não consigo encontrar evidências de que este seja um fenômeno comum o suficiente para afetar algo. Na verdade, tanto o Google Chrome quanto o Safari proíbem explicitamente o compartilhamento de recursos de terceiros em cache entre domínios devido a problemas de rastreamento.
Aqui está uma lista de boas razões para não usar o serviço hospedado e, em vez disso, hospedar você mesmo as fontes:
Desempenho
Encontrar um domínio leva tempo, você pode usar dicas de recursos para aliviar a situação, mas sempre o desempenho é sempre prejudicado ao 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 nativas em vez de fontes do Google.
Confidencialidade
Os serviços de fontes da web pagos, como Adobe Fonts, devem determinar as visualizações de página para cálculos, mas podem coletar mais dados do que o estritamente necessário. Se você tiver escolha, carregue as fontes usando css (
link rel = "stylesheet"
) em vez de JavaScript (
script
) para minimizar a quantidade de dados que um terceiro pode coletar sobre seus usuários.
Parece que o Google Fonts não coleta tantos visitantes do site quanto endereços IP e strings de agente do usuário, mas o Google não é totalmente altruísta em fornecer o serviço gratuitamente. Cada um dos cinquenta trilhões de visualizações de página usando fontes do Google é um ponto de dados que o Google não teria se os sites estivessem usando suas próprias fontes.
Ao controle
Com as fontes offline, você tem controle total sobre como carregar as fontes, permitindo servir subconjuntos personalizados, definir opções de exibição de fontes e especificar por quanto tempo o navegador deve armazenar em cache os arquivos de fontes.
Confiabilidade
Os serviços de terceiros podem desacelerar, desconectar ou parar de funcionar completamente . Com fontes auto-hospedadas, enquanto seu site está instalado e funcionando, suas fontes estarão disponíveis.
Conclusão
Cada uma dessas etapas pode ter benefícios por si só, mas usá-los juntos pode levar a grandes melhorias. Se você decidir seguir algumas das etapas neste artigo, tente usar uma ferramenta como Lighthouse ou Web Page Test antes e depois de fazer suas alterações para ver o efeito de cada alteração individual.
Na parte dois, veremos algumas das técnicas mais avançadas, incluindo estratégias de carregamento de fontes JavaScript e fontes variáveis. Também veremos a importância de escolher as fontes alternativas corretas e apresentaremos uma nova sigla - FOFT, Flash Of Faux Text.
Para não perder minhas descobertas de design em toneladas de marcadores no meu computador, criei o canal Drin Design Telegram . Todos os materiais legais e úteis (tutoriais, artigos, links para contas de caras legais) que eu encontrar para mim mesmo, irei postar lá. Fique a vontade.