Fazemos uma pequena pausa no trabalho de pesquisa para resolver um pequeno problema incômodo.
“FOUT” sendo “Flash of Unstyled Text”. Este é o fenômeno em que as fontes @ font-face demoram um pouco para carregar e, portanto, você vê a fonte substituta antes da fonte personalizada. Normalmente, isso não é um problema no Typekit. Nem é realmente um problema nos navegadores modernos hoje em dia (exceto o IE 9). No entanto, é um problema para nós porque escolhemos especificamente carregar o Typekit JavaScript de forma assíncrona.
A esperança não está perdida, porém, o Typekit tem esse problema resolvido, só precisamos fazer um pouco do trabalho em nosso site. Colocamos um novo nome de classe no elemento chamado “wf-loading” (carregamento de fonte da web). Então, em nosso CSS, declaramos que qualquer seletor que usa uma fonte personalizada fica visivelmente oculto até que o nome da classe seja removido. Um pouco arriscado, você pode pensar, mas se a fonte não carregar, haverá um tempo limite que removerá a classe de qualquer maneira. Isso é apenas para lutar contra FOUT, lembre-se, apenas um pouco de cuidado visual.
Fazemos tudo isso criando um pequeno Sass @mixinchamado “preventFOUT” e colocando @include-o em nossas pilhas de fontes personalizadas, que também são @mixins.
Isso funciona bem para nós agora. No final das contas, neste design, passamos para as fontes HF&J nas quais carregamos diretamente via @ font-face, então basicamente paramos de nos preocupar com isso.