Tag ‘css’

@font-face – Tipografia livre

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}

Compatibilidade:

A propriedade @font-face é compatível com os principais sistemas operacionais e browsers (inclusive o Internet Explorer 6):

• Linux – Chrome e Firefox
• Mac OS – Chrome, Firefox, Opera e Safari
• Windows – Internet Explorer 6, 7, 8 e 9, Chrome, Firefox, Opera e Safari

Talvez ajude…

• @font-face Generator – Gerar fontes para outros formatos
• Free Font Converter – Converter fontes para outros formatos