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.

Viu, a fonte icônica é exibida no Chrome, mas no Firefox não. Então como utilizar fontes icônicas no Firefox
Viu, a fonte icônica é exibida no Chrome, mas no Firefox não. Então como utilizar fontes icônicas no 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.

Petter Rafael
Petter Rafael

Desenvolvedor Web atua com as tecnologias Java e PHP apoiadas pelos bancos de dados Oracle e MySQL. Além dos ambientes de desenvolvimento acima possuiu amplo conhecimento em servidores Apache/Tomcat, Photoshop, Arte & Foto, Flash e mais uma dezena de ferramentas e tecnologias emergentes. Atualmente colabora com o Viablog escrevendo sobre programação e tecnologia.

Assinar blog por e-mail

Digite seu endereço de e-mail para assinar este blog e receber notificações de novas publicações por e-mail.

Junte-se a 321 outros assinantes

Busca

outubro 2020
DSTQQSS
 123
45678910
11121314151617
18192021222324
25262728293031

Categorias