Como usar fontes diferentes com CSS
Até bem pouco tempo, só era possível usar na web as fontes padrões, ou seja, as fontes que se sabia que já estavam instaladas na maioria dos computadores. Isso reduzia a web a um número muito pequeno de fontes. Poucas variações eram possíveis. Agora isso acabou.
Use a fonte que vc quiser. Sendo de boa qualidade e free, é claro.
No Arquivo CSS coloque:
@font-face {
font-family: "nome da fonte";
src: url("http://end_do_site/fontes/nome_da_fonte.eot"); /* para IE */
src: local("nome da fonte"), url("http://end_do_site/fontes/nome_da_fonte.ttf") format("truetype");
}
*{ font-family: "nome da fonte", Arial, sans-serif; }
---
Se a fonte tiver um nome formado por uma única palavra, ou palavras unidas por hifens, não há necessidade das aspas:
@font-face {
font-family: nome_da_fonte ;
src: url("http://end_do_site/fontes/nome_da_fonte.eot"); /* para IE */
src: local("nome da fonte"), url("http://end_do_site/fontes/nome_da_fonte.ttf") format("truetype");
}
*{ font-family: nome_da_fonte, Arial, sans-serif; }
---
Se vc não quiser usar a fonte diferente em tudo é só não usar o *.
Por exemplo, usar a fonte diferente só nos títulos:
h1, h2, h3 { font-family: nome_da_fonte, Arial, sans-serif; }
---
Se a fonte q vc quer usar não for truetype (.ttf), é só trocar a especificação.
| String | Font Format | Common extensions |
|---|
| “truetype” | TrueType | .ttf |
| “opentype” | OpenType | .ttf, .otf |
| “truetype-aat” | TrueType with Apple Advanced Typography extensions | .ttf |
| “embedded-opentype” | Embedded OpenType | .eot |
| “svg” | SVG Font | .svg, .svgz |
Por exemplo, quero usar a fonte nomeA.otf
@font-face {
font-family: nomeA ;
src: url("http://end_do_site/fontes/nomeA.eot"); /* para IE */
src: local("nome da fonte"), url("http://end_do_site/fontes/nomeA.otf") format("opentype");
}
*{ font-family: nome_da_fonte, Arial, sans-serif; }
----
Supondo q vc não tenha a versão .eot da fonte, necessária para o IE, use a versão q vc tem e converta.
Nesses sites vc consegue converter facilmente:
http://ttf2eot.sebastiankippe.com/http://www.conversoes.org/
