CSS Font Loss of detail

Issue

This is my first time using detail fonts but for some reason it loses all of its detail.

Expected result:

A font with fine detail

Actual result:

A font missing the fine details in the expected result

footer h3 {
  font-family: "Elegance";
  font-size: 50px;
  position: relative;
  right: 30px;
}

@font-face {
  font-family: "Elegance";
  src: url("../fonts/GeraldinePersonalUseItalic-PK12m.ttf");
}
<footer>
  <h3>Greetings</h3>
</footer>

Solution

I believe you have your font weight set to bold in your CSS somewhere.

I was able to reproduce this issue by setting my font-weight to bold.

Try changing it to normal/400 and see if that fixes it.

Screen shot of reproduced issue

Answered By – Dean Miranda

Answer Checked By – Gilberto Lyons (AngularFixing Admin)

Leave a Reply

Your email address will not be published.