Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Preload de fonte não funciona e Chrome exibe Warning.

Estou tentando realizar o preload de arquivos de fonte (.woff), porém o chrome me exibe o seguinte warning:

The resource [url] was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

A fonte está sim sendo utilizada, então pensei na possibilidade do Chrome não estar utilizando este mesmo download. Quando vi na aba Network, reparei que a fonte realmente está sendo baixada 2 vezes. Uma pelo preload e uma pelo @font-face.

Como resolver este problema? Os links estão corretos, apontando para o mesmo arquivo.

4 respostas

Oi Carlos,

Esse warning acontece aqui comigo tbm. É algo mais recente do Chrome, mas minha impressão é que ele ainda erra bastante. Aqui pra mim aparece o warning mas as fontes não são baixadas duas vezes, por exemplo.

Meu chute é que por algum motivo ele não tá considerando o request preloadado como idêntico ao request final na hora do uso. Por isso ele repete. E como você falou que as URLs estao identicas, tenho outras questões:

As fontes que você está servindo estão no mesmo domínio da página? O type no <link> tá como font/woff?

E a página está pública em algum lugar onde eu consiga auditar tbm?

Senão grava uma Timeline no DevTools e sobe o JSON no Timeline Viewer (ou manda o JSON direto pra mim que abro aqui).

Fala, Sérgio!

Vi aqui no site da Alura, e as fontes são baixadas duas vezes também: http://uploaddeimagens.com.br/images/000/913/223/full/print-alura.jpg

De qualquer forma, a resposta é sim pra todas as suas perguntas. rsrsrs

O site é o da empresa onde trabalho. Um link de ex.: http://www.litoralverde.com.br/destinos/angra-dos-reis-G6667

solução!

Olha, Carlos, você me deu um bom desafio aqui e um trabalho pra achar o problema. Mas achei, então, obrigado :)

Vamos lá: eu estava achando que o site da Alura funcionava pq pra mim não estava fazendo o double download. Isso porque eu tinha as fontes instaladas localmente e aí ele não baixava de novo. Foi só eu desinstalar a fonte aqui pra ver que realmente o problema acontecia.

Aí testando e procurando muito, caí nesse bug no Chromium que apontava uma issue aberta na especificação do preload. E que basicamente diz que o Chrome hoje precisa do atributo crossorigin no <link> senão ele não considera a fonte preloadada na hora de usar no @font-face.

Eu conhecia o crossorigin mas não achei que se aplicava pro caso da fonte local, no mesmo domínio. (tanto que te perguntei do domínio lá em cima justo pra eliminar essa possibilidade).

Aparentemente não foi só a gente que se perdeu com isso. Na especificação mesmo não pareceu ficar claro se isso é um bug do Chrome ou um buraco na spec.

Mas, pra resumir a aventura toda, se adicionar o crossorigin na tag tudo deve funcionar. (acabei de adicionar aqui no site da Alura tbm!)

Hahahahah Show de bola, Sérgio! Funcionou aqui também!

Muito obrigado, cara!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software