Font changing from Weight

Question

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

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

I already took the text-Decoration, already put the font-Weight as Lighter, or 100, but it did not help.

This is the CSS source code 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 recorded a video to better visualize the problem: here

Answer 1

You must use font-weight: 300 if you want to have the light font. Try this too, to make your fonts more readable:

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}