Publicado em 27 de ago.

Estilo css não carrega em IE e FF

Olá a todos,

Eu estou com problema que realmente está deixando aflito.

Eu construi um site htttp://igrejasdc.com.br/artcom, só que as folhas de estilos das fonts usadas não estão surtindo efeito no template do site.

Obs.: Isso acontece com Explorer e Firefox, no Chrome esta tudo normal, e quando eu acesso qualquer outra area do site (usando IE ou FF) as fonts voltam aparecer.

Qualquer ajuda é bem-vinda inclusive opiniões sobre o que melhorar.

Desde já agradeço a paciência daqueles que responderem a este apelo.

Discussão (6)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

William Bruno· 27 de ago.

Vc já verificou se não é cache do ie e ff ?

Como era para ficar, e como está ficando ? para mim, aqui parece estar correto.

Valide o html:

http://validator.w3.org/check?uri=http%3A%2F%2Figrejasdc.com.br%2Fartcom%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

kalua· 27 de ago.

Olá e obrigado por ter respondido William,

Primeiro, você testou no IE e FF, pois em meu computador e em outros lugares tambem onde fiz testes estavam dando este erro.

E a propósito, eu já validei o html e pelo que pude ver não é neste ponto o problema.

Luiz Magno· 27 de ago.

sua @font-face

@font-face {

font-family: 'Source Sans Pro ExtraLight';
font-style: normal;
font-weight: normal;
src: local('Source Sans Pro ExtraLight'), url('SourceSansPro-ExtraLight.woff') format('woff');
}

adicione o seguinte codigo

@font-face {

font-family: 'Source Sans Pro ExtraLight';
font-style: normal;
font-weight: normal;

src: local('Source Sans Pro ExtraLight'),
url('SourceSansPro-ExtraLight.woff') format('woff')/browsers atuais/,
url('SourceSansPro-ExtraLight.eot?#iefix') format('embedded-opentype'), /IE6-IE8/
url('SourceSansPro-ExtraLight.ttf') format('truetype')/ Safari, Android, iOS /;

url('SourceSansPro-ExtraLight.eot'); / IE9/
}

espero ter ajudado...

mariocosta· 27 de ago.

Tenta estruturar um tamanho padrão para Fonte que você utiliza, pois cada browser reconhece de forma diferente, pode ser isso que quebra o menu de seu site

Luiz Magno· 27 de ago.

é claro tem que ter os arquivos com as suas respectivas extenções no local, não basta apenas alterar o código...

:joia:

nesse link da adobe vem o pacote que você usa no seu site e vem com todos os formatos que eu passei...

só baixar e alterar o código como eu citei acima e pronto ...

http://store1.adobe.com/cfusion/store/html/index.cfm?store=OLS-US&event=displayFont&code=SOUP10001050

junto com o download vem o CSS já... peguei uma @font-face do css que vem no download para usar como exemplo

@font-face{

font-family: 'Source Sans Pro';
font-weight: 200;
font-style: normal;
font-stretch: normal;

src: local('SourceSansPro-ExtraLight'),
local('Source Sans Pro'),
url('EOT/SourceSansPro-ExtraLight.eot') format('embedded-opentype'),
url('WOFF/OTF/SourceSansPro-ExtraLight.otf.woff') format('woff'),
url('OTF/SourceSansPro-ExtraLight.otf') format('opentype'),

	url('TTF/SourceSansPro-ExtraLight.ttf') format('truetype');

}

Diéssica· 31 de ago.

Em quais versões dos navegadores IE e FF tu estás testando? É importante que informe esses detalhes quando reportar uma incompatibilidade assim. :)

Alguns browsers, e algumas versões deles, trabalham com [inline]@font-face[/inline] apenas em extensões específicas de fonte. Para IE 8 e versões inferiores, por exemplo, o único formato suportado é EOT. Nos browsers mais modernos, disponibilizar apenas o formato WOFF já é o suficiente.

Procure utilizar alguma ferramenta que gere diversos formatos a partir de um só, como o webfont generator do FontSquirrel. Sugiro que teste com um kit deles e veja o resultado.