Fonte personalizada do site no chrome fica ilegível
  • kelvymkelvym
    novembro 2011
    Estou desenvolvendo o site: http://www.portalunida.com.br/
    ...porém a fonte no Chrome (Windows 7, 32 bits) fica ilegível.
    Como concerto isso?
  • felquisfelquis
    novembro 2011
    Aqui eu li todas as fontes corretamente, sem problemas.

    Se as fontes ficarem meio "quebradiças" pode tentar usar um text-shadow 1px com a mesma cor da fonte. as vezes melhora um pouco.

    Veja este exemplo

    http://jsfiddle.net/7RLWm/

    Até Mais.
  • weblancasterweblancaster
    novembro 2011
    @kelvym: Acontece por cada Navegador renderizar de um jeito e ainda tem o SO que também interfere a certo ponto.
    Mas é um dos problemas comuns que podem ocorrer quando usamos Font-Face.
    Tenta mudar o tamanho da fonte, as vezes resolve. Caso não resolva, eu aconselho mudar para uma fonte similar. Use o Google fonts!

    @felquis : Não resolveria no caso dele, mas legal a solução. Vou tentar qualquer dia.

    Abçs
  • nandorossettonandorossetto
    novembro 2011
    O sistema operacional que é responsável por renderizar as fontes, e, não o navegador!
  • AndersonAnderson
    dezembro 2011
    fontes sem serifas são de melhor visual e aplica no letter-spacing e tambem BOLD, tenta essa!!
  • icaroolegarioicaroolegario
    dezembro 2011
    Primeiro tente escolher uma outra font, mas teste em todos os navegadores, os testes do www.fontsquirrel.com é uma boa. A dica dos colegas são 10, tente variar entre os tamanhos e uma sombra, as vezes resolve.
  • fdaciukfdaciuk
    março 2012
    Já tive problemas com isso, mas consegui resolver da seguinte forma:
    No seu site, a chamada para as fontes está assim:


    @font-face {
    font-family: 'Museo Slab';
    src: url('font/museo_slab_100.eot');
    src: url('font/museo_slab_100.eot?#iefix') format('embedded-opentype'),
    url('font/museo_slab_100.woff') format('woff'),
    url('font/museo_slab_100.ttf') format('truetype'),
    url('font/museo_slab_100.svg#MuseoSlab100') format('svg');
    font-weight: normal;
    font-style: normal;

    }


    Troque de posição a fonte no formato SVG com a WOOF. Assim, sempre que o navegador conseguir renderizar a fonte SVG ele vai fazê-lo, depois a true type e por último a woof (que normalmente causa o problema de fonte serrilhada). Deixe sua chamada assim:


    @font-face {
    font-family: 'Museo Slab';
    src: url('font/museo_slab_100.eot');
    src: url('font/museo_slab_100.eot?#iefix') format('embedded-opentype'),
    url('font/museo_slab_100.svg#MuseoSlab100') format('svg'),
    url('font/museo_slab_100.ttf') format('truetype'),
    url('font/museo_slab_100.woff') format('woff');
    font-weight: normal;
    font-style: normal;

    }


    .
  • Coloque a informação como descrita abaixo dentro do body no seu CSS pois o Webkit no momento depende de uma configuração para ler o antialised, não entendi o motivo, mas sé acontece com navegadores engine Webkit ou seja Safari e Chrome:


    body {
    /* CSS3*/
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    }


    Foi assim que resolvi meus problemas de antialised no Chrome.
  • fdaciukfdaciuk
    março 2012
    @ricardobenetti Outra solução pra resolver o mesmo problema. Legal ter mais de uma opção =)
  • Obrigada pelas dicas!
  • guigonetguigonet
    maio 2012
    @fdaciuk obrigado pela dica, funciona perfeitamente valeu!
  • fdaciukfdaciuk
    maio 2012
    :D
  • brunobpsbrunobps
    julho 2012
    ajudou bastante fdaciuk! Vlw msm
  • Fontes para utilizar em site http://www.fontsquirrel.com/
  • modromodro
    julho 2012
    Tive esse problema tb no chrome rodando no windows. O chrome rodando no Mac funcionou perfeitamente.
  • laurodmlaurodm
    outubro 2012
    A dica do fdaciuk funciona!! muito bom caras vlw
  • Muito bom, funcionou lindo aqui \0/ valeu mesmo