8

Estou a criar um website através de um child theme do Shoestrap, baseado em Bootstrap. Quando uso as webfonts elas apenas funcionam no Chrome.

O que estou a fazer mal?

O meu CSS é este

@font-face {
   font-family: 'open_sansitalic';
   src: url('assets/fonts/OpenSans-Italic-webfont.eot');
   src: url('assets/fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/OpenSans-Italic-webfont.woff') format('woff'),
        url('assets/fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
        url('assets/fonts/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
   font-weight: normal;
   font-style: normal;
}

h1 { font-family: 'open_sansitalic' sans-serif;  font-size: 40pt; line-height: 50pt; color: #f68934; }
2
  • 1
    Já tentou mudar o CSS do h1 para: font-family:'Open Sans', sans-serif; e adicionar font-style:italic;?
    – Kazzkiq
    Commented 6/03/2014 às 18:56
  • isso não corresponde às "font-family" declaradas Commented 6/03/2014 às 19:20

4 Respostas 4

5

Verifique se os outros arquivos de fonte podem ser acessados diretamente pelo navegador, seu servidor pode estar com problemas de falta de declaração de mime-type. Pode ser que seja o arquivo .htaccess que esteja bloqueando o acesso aos arquivos de fontes.

As extensões são: *.svg, *.woff, *.ttf e *.eot

2
  • Já experimentei colocar o codigo: <FilesMatch "\.(eot|otf|woff|ttf)$"> SetEnvIf Origin » "^http(s)?://(.+\.)?(domain1\.org|domain\.com)$" origin_is=$0 Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is </FilesMatch> e não resultou Commented 6/03/2014 às 20:02
  • Entretanto resolvi usar google fonts, e isso resultou. Noutros projectos, com outras fontes não sei se isso será viável. Eu tenho estado a trabalhar no localhost Commented 6/03/2014 às 20:04
4

Tente utilizar fonts do Google, a Open Sans está disponível nele.

Escolhas os estilos que você quer e depois é só adicionar no seu código HTML:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

E para usar no CSS:

font-family: 'Open Sans', sans-serif;

Com isso você evita requisições no seu servidor também.

Sobre performance no front-end, de uma lida em: http://browserdiet.com/pt/

Espero ter ajudado!

1

Muitas vezes isso acontece devido a má renderização dos arquivos na hora que são gerados. Isso já aconteceu muitas vezes comigo.

Tente renderizar nesse site: http://www.fontsquirrel.com/tools/webfont-generator, o melhor na minha opnião.

Utilizo essa fonte no site da empresa onde trabalho, veja: http://www.lecom.com.br (google fonts)

O amigo acima está certo, existe no google fonts, pesquisa lá.

1

coloca uma virgula depois do nome da web fonte

ex: font-family: 'open_sansitalic', sans-serif;  font-size: 40pt; line-height: 50pt; color: #f68934; 

Acho que isso resolve.

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 .