Categorias: Tutoriais

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.