Caso a fonte apareça de titulo em algumas caixas, é viável fazer com imagens.
Caso apareça nos titulos dos posts, é viavel fazer com image replacement, e dependendo do tamanho do site, com imagens.
Agora, para textos, eu recomendaria duas alternativas, ou o designer coloca uma fonte comum, ou se usa a importação de fontes via CSS com @font-face.
A importação de fontes via CSS era suportada há muito tempo pelo Internet Explorer desde sua versão 4, e recentemente no Mozilla Firefox, Google Chrome, Safari e Opera.
A declação para se importar fontes no CSS basicamente é:
@font-face {
font-family: Gentium; /*nome da fonte*/
src: url(http://site/fonts/Gentium.ttf); /* url da fonte*/
}
Mas como nem tudo são flores nesse mundo CSS, por a Microsoft ser pioneira nessa funcionalidade, acabou implementando o seu @fonte-face com um padrão de fonte que só o Internet Explorer suporta e ele só consegue usar esse formato, ele é o Embedded OpenType.Basicamente o Embedded OpenType é uma fonte TrueType compactada num formato que a Microsoft criou.
Então para usar as fontes tanto no Internet Explorer quanto em outros browsers, você tem que importar o arquivo da fonte padrão(TrueType) e o arquivo .eot(Embedded OpenType) dela para funcionar em ambos os browsers.
Existem hoje na web vários sites e softwares que convertem fonte TrueType em Embedded OpenType, vou deixar alguns links de referência no final do artigo, onde alguns deles serão dessas ferramentas, não vou explicar uma ferramenta, pois logo ela para de ser disponibilizada ou fica obsoleta.
Para inserir as duas fontes, temos varias alternativas se tratando de declaração CSS, um a delas é usar comentários condicionais:
<style type=”text/css”>
@font-face {
font-family: "testing";
src: url("output.ttf") format("truetype");
}
</style>
<!--[if IE]>
<style type=”text/css”>
@font-face {
font-family: "testing";
src: url("output.eot");
}
</style>
<![endif]-->
Outra, é declarar primeiro a fonte para o Internet Explorer, depois para os outros browsers:
@font-face {
font-family: "testing";
src: url("output.eot");
}
@font-face {
font-family: "testing";
src: url("output.ttf") format("truetype");
}
Outra, por um método chamado de smile ( PS: nunca testei ):
@font-face {
font-family: 'Dax Regular'; /*nome fonte*/
src: url('dax.eot'); /* url fonte para ie */
src: local('Dax'), url('dax.woff') format('woff'), url('dax.ttf') format('truetype'), url('dax.svg#webfont') format('svg'); /* url fonte para outros browsers, local('Dax') fala pra primeiro buscar a fonte Dax no computador do usuário, caso não encontrar ira baixar uma dessas fontes */
}
Não é só o padrão TrueType de fontes que é suportado pelo @font-face, mas é o único que é possível ser convertido para Embedded OpenType.
Procure usar o @fonte-face com fontes gratuitas, pois como a fonte é baixada para o computador do usuário, os criadores das mesmas combram um lincensa especial para esse tipo de uso.
Referências:
http://code.google.com/p/ttf2eot
http://code.google.c...f2eot/wiki/Demo
http://edsonjunior.c...fontes-ttf-eot/
http://paulirish.com...ntation-syntax/
http://www.w3.org/TR...-font-face-rule
