7

Tenho um site wordpress onde instalei duas fontes: Calibri e Castlet. No Chrome funciona corretamente, mas no Firefox ele reconhece apenas a Calibri. O site é esse: http://plengenharia.syswebapp.com.br/

No Css:

@font-face {
font-family: Calibri;
src: url("wp-includes\fonts\calibri.ttf") format('truetype'), src: local("Calibri"), url("wp-includes\fonts\calibri.eot"), url("wp-includes\fonts\calibri.eot?#iefix") format('embedded-opentype'), url('wp-includes\fonts\calibri.woff') format('woff');
}

@font-face {
font-family: Castlet;
src: url("wp-includes\fonts\Castlet.ttf") format('truetype'), src: local("Castlet"), url("wp-includes\fonts\Castlet.eot"), url("wp-includes\fonts\Castlet.eot?#iefix") format('embedded-opentype'), url('wp-includes\fonts\Castlet.woff') format('woff');
}
6
  • Afinal, a fonte não é encontrada (404) ou o browser acusa problema na fonte (não renderiza, utiliza outra fonte, etc)? Quais versões de browser testou? O IE, por exemplo, até hoje não tem suporte total a fontes TTF e OTF. Commented 17/01/2015 às 16:50
  • Se o erro fosse 404 nao deveria dar no chrome, por isso pode excluir essa opção ..
    – thecreator
    Commented 5/02/2015 às 1:06
  • 1
    Veja aqui se esta resposta lhe resolve o problema. Visto que é semelhante a pergunta..
    – thecreator
    Commented 5/02/2015 às 1:12
  • Meu Firefox mostra a fonte perfeitamente (ao menos não vejo diferenças do Firefox e Chrome). Questões com links externos devem ser evitadas, pois nem sempre é possível reproduzir o problema em páginas que está havendo modificações.
    – Syzoth
    Commented 6/02/2015 às 22:03
  • Rafaella esta outra pergunta/resposta resolve o seu problema?
    – Sergio
    Commented 16/02/2015 às 18:56

3 Respostas 3

3

seu erro está em repetir o "src:".. esse é o name do atributo, tenta deixar assim:

src: url(...)..., url(...)...

se perceber nos 2 exemplos vc repete o src: 2x

1
  • Você tem toda razão, que falta de atenção nossa (hehehe) +1 espero que aceitem a sua resposta
    – Syzoth
    Commented 16/04/2015 às 21:04
2

A tua regra de CSS at-rule, a @font-face, encontra-se com declarações incorretas, motivo pelo qual não é interpretada por alguns navegadores.

Formatação correta

@font-face {
    font-family: 'Calibri';
    src:
        local('Calibri'),
        url('wp-includes/fonts/calibri.ttf');
    src:
        url('wp-includes/fonts/calibri.eot'),
        url('wp-includes/fonts/calibri.eot?#iefix') format('embedded-opentype'),
        url('wp-includes/fonts/calibri.woff') format('woff'),
        url('wp-includes/fonts/calibri.ttf') format('truetype');
}

Explicação

  1. Especificar a pesquisa por "fonte local" antes de qualquer outro endereço:

    src:
        local('Calibri'),                       /* local */
        url('wp-includes/fonts/calibri.ttf');   /* remoto */
    

    De notar que esta declaração deve terminar com ; e não com ,.

  2. Especificar as origens para os outros ficheiros pela ordem mais provável de utilização e numa declaração separada:

    src:
        url('wp-includes/fonts/calibri.eot'),
        url('wp-includes/fonts/calibri.eot?#iefix') format('embedded-opentype'),
        url('wp-includes/fonts/calibri.woff') format('woff'),
        url('wp-includes/fonts/calibri.ttf') format('truetype');
    
  3. Estando a programar em servidores Windows ou em servidores Linux, a inclinação da barra nos endereços web é sempre /:

    "http://www.example.com/fonts/minhaFonte.eot"
    
  4. Não absolutamente necessário para o teu caso em particular, mas os nomes das famílias de fontes devem estar envolvidos por ' ou " para uma correta interpretação por parte dos navegadores:

    W3C CSS Fonts Module Level 3 - Family Name Value

    Os nomes das famílias de fonte que não sejam os genéricos tem que estar como uma string citada, ou seja, dentro de ' ou ". Alternativamente se não dentro de aspas ou plicas, devem estar como uma sequência de um ou mais identificadores.

    No teu caso isto acaba por ser irrelevante por ser uma palavra única Calibri, mas fica a nota para futuros leitores.

Relacionado

Para estes casos, podemos recorrer ao gerador de web-font presente no web-site FontSquirrel que trata de gerar os ficheiros adequados para cada navegador, bem como a folha de estilos com tudo pronto a utilizar no nosso web-site.

inserir a descrição da imagem aqui

1

A primeira sugestão é corrigir as barras, já que URLs usam /.

src: url("wp-includes/fonts/Castlet.ttf") format('truetype'), src: local("Castlet"), url("wp-includes/fonts/Castlet.eot"), url("wp-includes/fonts/Castlet.eot?#iefix") format('embedded-opentype'), url('wp-includes/fonts/Castlet.woff') format('woff');

A segunda coisa que eu observaria é o conteúdo dessas tags url(). O caminho é relativo à localização do arquivo CSS (W3: http://www.w3.org/TR/REC-CSS1/#url).

Algo como

url("/wp-includes/fonts/Castlet.eot")

ou (de preferência)

url("http://plengenharia.syswebapp.com.br/wp-includes/fonts/Castlet.eot")

pode resolver seu problema.

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 .