Boteco Digital

Font-Face, utilizando fontes além do básico!

Sempre houve uma grande dificuldade em trabalhar com fontes na web, o problema? Ficamos limitados a utilizar somente as fontes instaladas no computador do usuário, ou seja somente as fontes instaladas por padrão do sistema operacional. É claro existem algumas técnicas que podemos utilizar, mas sinceramente só não chamamos elas de gambiarras porque não existia outro modo! Agora com CSS3 temos a propriedade font-face que permite carregar um fonte externa e utilizá-la no navegador.

@font-face{
	font-family:"28 Days Later";
	src:url("28_days_later.ttf");		
}

Na linha 2 declaramos o nome da fonte e na linha 3 declaramos a url, ou seja onde hospedamos a fonte.

Agora basta utilizar a nova fonte normalmente.

h1{
	font-family:"28 Days Later",Verdana, Arial;		
}

Temos um pequeno problema! Internet Explore(por essa você não esperava) ele só aceita font OET então é preciso converter a fonte para esse formato. Isso pode ser feito pelo site TTF to EOT Font Converter. Mas confesso que com a fonte que utilizei ficou um pouco bugado.

<style type="text/css">
	h1{
		font-family:"28 Days Later";		
	}	
	@font-face{
		font-family:"28 Days Later";
		src: url("28_days_later.ttf"); /*somente para o IE*/
	}
</style>
<!--[if IE]>
<style type="text/css">
	@font-face {
		font-family: "28 Days Later";
		src: url("28_days_later.eot");
	}
</style>
<![endif]-->

Veja um exemplo pronto.

Bom era isso, T++ .

Categorias CSS
comments powered by Disqus