Como utilizar fontes icônicas no Firefox
Veja como utilizar fontes icônicas no Firefox que por motivos de segurança irá proibir este tipo de comportamento.
[ad#texto]
Vocês já precisaram utilizar fontes icônicas (@font-face) em algum site ou projeto Web? Embora seja um recurso visual legal e simples de utilizar existem problemas em alguns navegadores e pasmem, este navegador é o Firefox.
Então como utilizar fontes icônicas no Firefox?
Primeiro vamos entender o problema, ele ocorre pois por padrão o Firefox não exibe fontes cross-domain então é preciso ajustar o header do documento para induzir o Firefox a aceitar este comportamento, inclusive sites baseados em CDN também sofrem com este problema.
A melhor forma de criar este comportamento para o Firefox é definir um cabeçalho Access-Control-Allow-Origin para a fonte, de preferencia no .htaccess, caso você esteja utilizando o Apache. Veja um exemplo:
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Mas se você estiver utilizando o nginx basta adicionar o trecho abaixo no arquivo de host virtual:
location ~* \.(eot|otf|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}
Pronto, agora você já sabe como utilizar fontes icônicas no Firefox sem nenhum problema de incompatibilidade.
Estranhamente este caso ocorre no Firefox e não no maior amigo dos desenvolvedores Web, Internet Explorer, mas a principio o motivo dele existir seria uma necessidade para melhorar a segurança.
