Este documento fornece algumas informações técnicas sobre o que está acontecendo por trás nos cenários ao solicitar uma fonte da Web com a API Google Fonts.
Este documento também fornece informações sobre o comportamento específico do navegador.
Se você quer apenas usar a API Fonts, não precisa ler esta página. No entanto, esta página pode ajudar você a melhorar o desempenho de carregamento da página.
O que a API Google Fonts está exibindo?
Quando um navegador envia uma solicitação de uma folha de estilo da API Fonts (conforme especificado em um
<link> na sua página da Web), a API Fonts exibirá uma folha de estilo gerada para
e ao user agent específico que faz a solicitação.
Uma solicitação do Inconsolata do Firefox, por exemplo, retorna o seguinte CSS:
@font-face {
font-family: 'Inconsolata';
src: local('Inconsolata'), url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw') format('truetype');
}
Uma solicitação do Internet Explorer, por outro lado, retorna:
@font-face {
font-family: 'Inconsolata';
src: url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw');
}
Depois de fazer o download do CSS, o navegador faz o download da fonte nos formatos para o navegador.
Comportamento específico do navegador
Esta seção descreve o comportamento padrão de cada navegador com fontes da Web. Observe que é possível controlar esses comportamentos usando o Web Font Loader.
Para obter uma lista de navegadores compatíveis, consulte o Perguntas frequentes.
Google Chrome
O Chrome renderiza o restante da página, mas até que a fonte seja carregada, ela um espaço em branco no lugar do texto que usa a fonte.
Mozilla Firefox
O Firefox exibe primeiro o texto com a fonte padrão e depois renderiza novamente o texto em da fonte depois de ser carregada. Esse comportamento é conhecido como um "flash de imagens ".
Apple Safari
O Safari renderiza o restante da página, mas até que a fonte seja carregada, ela um espaço em branco no lugar do texto que usa a fonte.
Microsoft Internet Explorer
O Internet Explorer processa o resto da página, mas até que a fonte seja carregada, ele exibe um espaço em branco no lugar do texto que usa a fonte.
De forma mais geral, o comportamento do Internet Explorer pode variar dependendo do canal e a existência de vários elementos. Para oferecer um comportamento consistente em todos os navegadores, use o Web Font Loader. Para por exemplo, é possível fazer com que todos os navegadores se comportem como o Firefox.