Este documento fornece algumas informações técnicas sobre o que acontece nos bastidores quando você solicita uma fonte da Web com a API Google Fonts.
Este documento também oferece informações sobre o comportamento específico do navegador.
Se quiser usar apenas a API Fonts, não será necessário ler esta página. No entanto, a leitura desta página pode ajudar a melhorar o desempenho do carregamento da página.
Qual é a veiculação da API Google Fonts?
Quando um navegador envia uma solicitação para uma folha de estilo da API Fonts (conforme especificado em uma
tag <link> na sua página da Web), essa API exibe uma folha de estilo gerada para
o user agent específico que faz a solicitação.
Uma solicitação para 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');
}
Após o download do CSS, o navegador faz o download da fonte no formato adequado para ele.
Comportamento específico do navegador
Esta seção descreve o comportamento padrão de cada navegador com fontes da Web. Observe que você pode controlar esses comportamentos usando o Web Font Loader.
Para ver uma lista de navegadores compatíveis, consulte as Perguntas frequentes.
Google Chrome
O Chrome renderiza o restante da página, mas até que a fonte seja carregada, exibe um espaço em branco no lugar do texto que usa a fonte.
Mozilla Firefox
Primeiro, o Firefox exibe o texto na fonte padrão e, em seguida, renderiza novamente o texto na fonte depois de carregá-la. Esse comportamento é conhecido como "Flash" de texto sem estilo.
Apple Safari
O Safari renderiza o restante da página, mas até que a fonte seja carregada, exibe um espaço em branco no lugar do texto que usa a fonte.
Microsoft Internet Explorer
O Internet Explorer renderiza o restante 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.
Em geral, o comportamento do Internet Explorer pode variar dependendo da colocação e da existência de vários elementos. Se você quiser oferecer um comportamento consistente em todos os navegadores, use o Web Font Loader. Por exemplo, você pode optar por fazer com que todos os navegadores se comportem como o Firefox.