Usando fontes diferentes

Quando eu comecei a testar o @font-face não conseguia fazer funcionar por nada no mundo no Internet Explorer, só os outros navegadores conseguiam me deixar feliz. Então descobri que pro IE precisa ser o formato diferente de fonte e tem até um programa pra converter, mas tentei de tudo e não consegui usar esse programa e olha que li mil e um tutoriais pela internet até desistir. Sorte que encontrei esse site online que converte fontes free (precisa se cadastrar), se você subir uma fonte com final ttf por exemplo, você pode converter pra vários outros formatos, às vezes demora um pouco pra ele converter, mas te mandam email avisando quando estiver ok pra baixar.

Os formatos de fontes que precisamos nesse tutorial são eot, woff, otf (ou pode ser ttf) e svg. Então será necessário quatro arquivos pra cada fonte que você queira usar.
No meu exemplo vou usar a fonte de mentirinha com o nome MinhaFonte. Para isso precisaremos de uma minhafonte.eot, minhafonte.woff, minhafonte.otf e minhafonte.svg.

Então salve os quatro formatos de fontes em uma pasta “fonts” e adicione no seu ftp e use o código abaixo no seu CSS:

Depois cria um arquivo css com o nome “font.css” e adiciona o código abaixo:

@font-face {
  font-family:'MinhaFonte';
  src:url('fonts/minhafonte.eot'); /* IE9 */
  src:url('fonts/minhafonte.eot?#iefix') format('embedded-opentype'), /* IE6 - IE8 */
      url('fonts/minhafonte.woff') format('woff'), /* Modern Browsers */
      url('fonts/minhafonte.otf') format('truetype'), /* Safari, Android, iOS = pode usar extensões ttf ou otf */
      url('fonts/minhafonte.svg#MinhaFonte') format('svg'); /* Legacy iOS */
}

Feito isso, agora é só adicionar o nome da fonte onde quer que ela apareça. Veja um exemplo abaixo:

h1 {font-family:"MinhaFonte", sans-serif; font-size:20px;}

Não esqueça de alterar as urls de acordo com o local que você salvar a pasta de fontes.
E cuidado pra não usarem fontes que não funcionam os acentos e o ç ;)

Se quiser, veja como usar fontes diferentes com o Cufón.

Deixe seu comentário

16 comentários

  1. Há tempos que eu procurava um tutorial ensinando a fazer isso, o google font directory até deu uma ajuda, mas eu não gosto das fontes que tem lá =P

    obrigada pela dica Dani!

  2. Nossa, dica valiosíssima! Tô preparando meu novo portfolio e com certeza vou usar isso. Agora, não funcionou no meu IE (aqui no trabalho é o navegador padrão), tive que abrir no FF para visualizar.

    Beijos!

  3. Olá, mto bom o tutorial, mas não sei pq não está funcionando no IE (como sempre nada funciona), tem alguma coisa que possa estar bloqueando nele? bjo.

    1. Acho que é o tipo da fonte. Percebi que minha logo não funciona no IE :(
      O jeito é fazer testes com outras, pra encontrar uma que ele realmente aceite, mesmo convertendo pro formato dele.
      O IE deveria deixar de existir.

    1. Se você salvou as fontes em algum lugar e no css chamou aquela fonte (com o endereço da onde ela está hospedada, deveria funcionar.
      Mas eu andei fazendo uns teste e algumas fontes não funcionam por nada desse mundo no IE.

  4. Isso mesmo, Dani, enviei as fontes para meu servidor e nada. Cheguei a pensar até mesmo que eram as aspas ou apóstrofos. Depois, que o problema era minha hospedagem (mas hospedei no FileDen e também não deu certo). Agora só penso que é o próprio Tumblr. :/

  5. Tive que jogar do lado de fora, porque, por alguma razão, ele não conseguia encontrar quando eu jogava na pasta. Fiz mil tentativas, testando caps lock, diretórios e tudo, mas no fim, consegui! Tá meio “bagunçado” porque ficou no meio de outros arquivos do WordPress, mas pelo menos funcionou. Muito melhor do que usar uma imagem ;)