0

Estou fazendo um site utilizando o bootstrap e estava fazendo o código normalmente, meu cliente comprou a fonte Pluto Bold e a Condensed Light, e estou utilizando elas como webfonts.

O problema é que a fonte fica com o peso light no css, mas quando vou visualizar o site ela fica com um tipo de borda, que deixa ela mais espessa, mas quando o slide troca de slide ela fica normal (light).

Já tirei o text-decoration, já coloquei o font-weight como lighter, ou 100, mas não adiantou.

Esse é o código CSS das fontes no vídeo abaixo:

h1 {
    font-family: PlutoBold;
    font-size: 3.35em; /* 40pt */
    text-transform: uppercase;
    color: #f4c43d;
}
h2 {
    font-family: PlutoBold;
    font-size: 2.0em; /* 24pt */
}
h3 {
    font-family: PlutoCondLight;
    font-size: 1.5em; /* 18pt */
    padding-bottom: 40px;
    color: #fff;
}
p {
    font-family: PlutoCondLight;
    font-size: 1.33em; /* 16pt */
    color: #fff;
}

E o código HTML:

<h1>Empresa</h1>
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut molestie lacus, ut malesuada sapien. Integer nec tortor at ligula semper lobortis. Sed mattis lorem ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rutrum urna viverra elit fermentum malesuada a sed mi. Sed viverra lobortis ex quis scelerisque. Sed pulvinar nibh eu purus pulvinar pellentesque. Maecenas et elit et odio accumsan fermentum quis in diam. Duis ultricies, elit sed pharetra congue, nisl elit luctus lacus, vitae vehicula nisl eros faucibus dui. Aliquam sollicitudin accumsan ullamcorper.</p>

Gravei um vídeo para visualizarem melhor o problema: aqui

4
  • Acho que o vídeo não vai carregar na minha internet discada... Como está seu @font-face? Commented 28/07/2015 às 2:57
  • É conflito de CSS isso Commented 28/07/2015 às 3:01
  • @danguilherme eu apenas "chamei" a web font: <link rel="stylesheet" type="text/css" href="css/MyFontsWebfontsKit.css">
    – JefSilva
    Commented 28/07/2015 às 14:41
  • @AndréBaill conflito com o CSS do Bootstrap?
    – JefSilva
    Commented 28/07/2015 às 14:41

1 Resposta 1

2

Você deve usar font-weight: 300 se deseja ter a fonte light. Tente também isso, para deixar suas fontes mais legíveis:

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
1
  • 1
    O font-weight: 300 não fez diferença. Mas text-rendering resolveu o problema. Muito obrigado Rodrigo!
    – JefSilva
    Commented 28/07/2015 às 14:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .