Fountain changing weight

0

I'm making a website using the bootstrap and I was doing the code normally, my client bought the Pluto Bold font and the Condensed Light, and I'm using them as webfonts.

The problem is that the font is light weight in the css, but when I go to visualize the site it gets a kind of border that makes it thicker, but when the slide changes slide it becomes normal (light) .

I already took the text-decoration, I already put the font-weight as lighter, or 100, but it did not help.

This is the CSS code for the fonts in the video below:

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;
}

And the HTML code:

<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>

I've taped a video to better visualize the problem: here

    
asked by anonymous 28.07.2015 / 04:35

1 answer

2

You should use font-weight: 300 if you want to have the light source. Also try this, to make your fonts more readable:

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
    
28.07.2015 / 06:45