@font-face – Tipografia livre

Publicado em 22 abril 2010 por Caineli
Tags:css, fontes, tipografia

A propriedade @font-face do CSS possibilita aos browsers renderizar fontes que não estão instaladas no computador do usuário. Exemplo:

@font-face{
	font-family:'Comic Book';
	src:local('Comic Book'),url('Comic Book.ttf') format('TrueType');
}
p{font-family:'Comic Book',arial,helvetica,sans-serif}

Valores:

O valor “local” informa se a fonte já existe no sistema operacional do usuário antes de ser instalada
O valor “url” informa o caminho da fonte que será instalada
O valor “format” informa qual é o formato da fonte que será instalada

Formatos:

Os formatos aceitos pelos browsers são:

Embedded OpenType – .eot
OpenType – .otf
Scalable Vector Graphics – .svg e .svgz (formato .svg “gzipado”)
TrueType – .ttf

O Internet Explorer suporta apenas o formato Embedded OpenType (.eot), portanto deverão ser declarados dois formatos, sendo um exclusivo para as versões do Internet Explorer (.eot) e/ou outro(s) para os demais browsers (.otf, .svg, .svgz e .ttf). Exemplo:

@font-face{
	font-family:'Comic Book';
	src:url('Comic Book.eot'); /* IE */
	src:local('Comic Book'),url('Comic Book.ttf') format('TrueType'); /* DEMAIS BROWSERS */
}
p{font-family:'Comic Book',arial,helvetica,sans-serif}

Exemplo declarando outros formatos:

@font-face{
	font-family:'Comic Book';
	src:url('Comic Book.eot'); /* IE */
	src:local('Comic Book'),
	    url('Comic Book.otf') format('OpenType');
	    url('Comic Book.svg') format('Scalable Vector Graphics');
	    url('Comic Book.svgz') format('Scalable Vector Graphics');
	    url('Comic Book.ttf') format('TrueType')
}
p{font-family:'Comic Book',arial,helvetica,sans-serif}