0

É sabido que as fontes do tipo woff e woff2 não são suportadas por todos os navegadores, estou usando em minha página e no console do google chrome acusa problemas para baixar a fonte do tipo woff2, na no mozilla as do tipo .woff.

Alguém poderia me dizer por favor como utilizar estas fontes customizadas sem que estes tipos de erro apareçam no console? O ideal é usar só TTF e EOT.

Exemplo do erro no chrome:

Failed to load resource: the server responded with a status of 404 (Not Found)

Porém a fonte esta no diretório correto.

5
  • Esse erro 404 Not Found é na localização do arquivo e não no suporte, provavelmente vc apontou o caminho relativo de maneira errada. Coloque o caminho completo assim url(http://site/fonts/fonte.woff2) por exemplo e teste.
    – Syzoth
    Commented 18/01/2018 às 21:43
  • Legal Guilherme, vou tentar! Commented 18/01/2018 às 21:50
  • Não sei se é o seu caso, mas se vc tiver construído sua classe assim também não vai funcionar: .className { @font-face { font-family: Helvetica; url(Helvetica.woff); } }
    – hugocsl
    Commented 18/01/2018 às 22:26
  • não deu certo, o meu css esta na pasta dist/estilos/fonts.css e as fontes na pasta dist/fonts, tentei vários caminhos porém não funciona. Commented 19/01/2018 às 12:26
  • hugocsl você tem alguma sugestão? Commented 19/01/2018 às 12:30

1 Resposta 1

0

Pesquisei e encontrei a solução, as fontes woff2 e woff sempre ser devem vir antes das demais na folha de estilo.

3
  • Isso não explica o erro 404 e a questão da ordem deve ser por questões de suporte vs retro-compatibilidade, creio que seria melhor você citar, fontes pois nem tudo que lemos é de fato correto em blogs e afins. Se puder informar de onde obteve isto talvez possamos encontrar algo mais técnico para a informação.
    – Syzoth
    Commented 19/01/2018 às 17:41
  • 1
    Munir vc tem que escrever seu CSS pela ordem das coisas que vc quer chamar primeiro. Se vc colocar por ex. a fonte TTF na primeira linha se o seu browser tiver suporte ao formato TTF ela será a fonte carregada e os demais formatos ficam como fallback. Logo que se quer o formato WOFF2 ele tem que ser a primeira opção no src: url Deu pra entender?
    – hugocsl
    Commented 19/01/2018 às 18:05
  • isso mesmo hugocs!, foi o que eu fiz, obrigado a todos Commented 24/01/2018 às 12:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .