Downloaded Font Is Displayed Differently In Browser

This font Glamora is displayed with more thick than it should be and other weird things the font look like this, but is displayed like this this is the formatting for that text

Solution 1:

There’s probably only one weight of this font, ie. a single style with no bold version or other variants.

By default, h1 and all other headings are set to be bold, so you are probably getting some faux bolding, created by the browser.

Try adding:

.brand h1 {
  font-family: Glamora;
  /* Etc. */

  font-weight: normal;
}

I was able to reproduce your issue, and adding font-weight: normal; fixed it:

This might also have something to do with how the font outlines or how the font file was built, or the fact that it hasn’t been produced as a web font.

The license doesn’t appear to allow converting it into a web font, but it might be worth getting in touch with the designer and seeing if they would produce WOFF and WOFF2 files for you, or modify the license to allow converting the format. That said, that might not impact the issue, and this CSS change does fix it.