A diretiva @font-face das CSS3

Publicado em: 23/10/2011

Introdução

A diretiva @font-face das CSS3 está prevista no Módulo Fonts das CSS3 e destina-se a especificar um tipo de fonte para uso em determinadas partes de uma página ou na página toda (ou no site todo) e ter a garantia que a fonte especificada será renderizada no navegador do usuário independentemente de ele ter ou não a fonte instalada em seu sistema operacional.

Lembre-se que com uso das CSS2.1 você deve fornecer uma lista de fontes terminando com uma fonte genérica para exibir seus textos. Por exemplo:

p {
	font-family: "Lucida Grande", "Lucida Sans", Verdana, Sans-Serif;
	}

A regra CSS mostrada determina que os parágrafos sejam renderizados preferencialmente com uso da fonte "Lucida Grande" instalada por padrão no sistema operacional MAC OS X.

Caso o usuário esteja visualizando a página em ambiente Windows é quase certo que ele não tenha a fonte instalada e neste caso entra a segunda opção da lista de fontes que é a "Lucida Sans" instalada por padrão no sistema operacional Windows.

E se os dois usuários tiverem desinstalado as fontes "Lucida" do seu sistema operacional? A renderização será com "Verdana" e se esta falhar vamos para a última opção da lista que é uma família genérica válida para qualquer sistema operacional. Daí; a necessidade de se encerrar a lista com uma fonte genérica.

Bem, é muito provável que você já tivesse conhecimento do que foi dito sobre lista de fontes em declaração CSS, contudo fiz constar apenas como lembrete e para ressaltar que com uso da diretiva @font-face o conceito relatado mudou. Acabou a dependência de sistema operacional para renderizar fontes.

Princípio de funcionamento

Desenvolvi uma página exemplo para demonstrar o uso da diretiva. Se você preferir, antes de continuar a leitura, dê uma olhada nela.

A idéia central da diretiva @font-face é informar ao navegador do usuário que a fonte especificada na folha de estilo deve ser procurada primeiramente no sistema operacional local e caso não seja encontrada ela deverá ser baixada para a máquina local de um determinado endereço da web informado nas CSS. Isto é, o desenvolvedor hospeda o arquivo da fonte (normalmente em um diretório do site) e fornece o endereço de hospedagem nas CSS.

Considere que resolvemos usar a fonte "RegencyScriptFLF Regular" (tipo de fonte que simula manuscrito) em nosso projeto. Observe as regras CSS a seguir

@font-face {
	font-family: "RegencyScriptFLF Regular";
	src: url("https://site/fontes/RegencyScriptFLF-Regular.ttf");
	}

p { font-family: "RegencyScriptFLF Regular", Cursive; }

O navegador do usuário fará download da fonte no endereço constante do descritivo src e utilizará a fonte para renderizar os parágrafos do documento. Caso o arquivo não seja encontrado no endereço especificado ou o navegador não entenda a diretiva (retro-compatibilidade) será utilizada a fonte genérica Cursive.

Sintaxe e terminologia

A diretiva @font-face adota uma sintaxe semelhante à sintaxe da regra CSS, contudo a terminologia difere. A especificação da diretiva nomeia o par descriptor: value (descritivo: valor) e não property: value (propriedade: valor) como nas CSS.
Assim, a sintaxe geral e sua terminologia é:

@font face {
	descritivo: valor;
	descritivo: valor;
	...
	}

Formato

Os formatos de fontes aceitos pelos navegadores padrão são .ttf, .otf, .svg e .svgz. Observe que neste tutorial estamos utilizando o formato .ttf, contudo o navegador Internet Explorer suporta apenas a extensão proprietária .otf e assim, a regra CSS apresentada no início deverá sofrer um acréscimo para que o IE a entenda, e, é claro, os dois formatos devem estar disponíveis para download. Observe a seguir.

@font-face {
	font-family: "RegencyScriptFLF Regular";
	src: url("https://site/fontes/RegencyScriptFLF-Regular.ttf");
	}

p { font-family: "RegencyScriptFLF Regular", Cursive; }

Valor local

Para informar ao navegador que ele deve, antes de baixar a fonte, verificar se ela existe no sistema local do usuário usamos o valor local no descritivo src. Observe a seguir.

@font-face {
	font-family: "RegencyScriptFLF Regular";
	src: local("RegencyScriptFLF-Regular"), url("https://site/fontes/RegencyScriptFLF-Regular.ttf");
	}

p { font-family: "RegencyScriptFLF Regular", Cursive; }

Valor format

A especificação prevê ainda um valor para a diretiva, denominado format, que visa a informar o tipo da fonte. Observe a seguir.

@font-face {
	font-family: "RegencyScriptFLF Regular";
	src: local("RegencyScriptFLF-Regular"), url("https://site/fontes/RegencyScriptFLF-Regular.ttf") format("opentype");
	}

p { font-family: "RegencyScriptFLF Regular", Cursive; }

E esta é a sintaxe final completa para uso da diretiva @font-face usada na página exemplo para este tutorial

Considerações finais

A diretiva @font-face certamente vem de encontro aos anseios e desejos não só de desenvolvedores, mas notadamente de designers no campo da tipografia para sites. Vai ser uma grande inovação no uso de fontes decorativas em partes do site, livre das limitações das técnicas de "image replacement", resolvendo definitivamente questões de acessibilidade à imagens textuais contendo informação.

Uma questão que merece atenção é o fato de que arquivos de fontes em geral são protegidos por direitos autorais e representam custo. Isto acaba por limitar as fontes disponíveis para uso. Solução: comprar as fontes (encarecer o projeto? ou software livre?

Link para a página exemplo.

Navegadores que suportam @font-face