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/
