Saber quando os recursos são carregados é uma parte fundamental da criação de sites funcionais e elegantes. Estamos acostumados a usar a função DOMContentLoaded (comumente chamado de “domready”), mas o senhor sabia que existe um evento que informa quando todas as fontes foram carregadas? Vamos aprender a usar o evento document.fonts!

O document.fonts apresenta um ready que é um Promise que representa se as fontes foram carregadas:

// Await all fonts being loaded
await document.fonts.ready;

// Now do something!  Maybe add a class to the body
document.body.classList.add('fonts-loaded');

Os arquivos de fontes podem ser relativamente grandes, portanto o senhor nunca pode presumir que eles foram carregados rapidamente. Um simples await do document.fonts.ready dá ao senhor a resposta!

  • Mais 5 APIs HTML5 que o senhor não sabia que existiam

    O Revolução do HTML5 nos proporcionou algumas APIs JavaScript e HTML incríveis. Algumas são APIs que já sabíamos que precisávamos há anos, outras são ajudantes de ponta para dispositivos móveis e desktops. Independentemente da força ou da finalidade da API, qualquer coisa que nos ajude a fazer melhor o nosso trabalho é uma…

  • Servindo fontes da CDN

    Para obter o máximo desempenho, todos sabemos que devemos colocar nossos ativos na CDN (outro domínio). Junto com esses ativos estão as fontes da Web personalizadas. Infelizmente, as fontes da Web personalizadas via CDN (ou qualquer solicitação de fonte entre domínios) não funcionam no Firefox ou no Internet Explorer (corretamente, por especificação)…