Font not rendering/displaying correctly?

Question

I ask out to the community if anybody has ever had any issues embedding fonts on their website and it being rendered terrible as the outcome? This is the case across all latest browsers not tied to a specific browser...

Tried adding certain css rules to change the fonts weight, style, smoothness etc but doesn't seem to effect the font by any means, any ideas?

You will notice that the letter 'A' is not as it should be but the correct font types are loaded with no issues.

Font can be found here

Screenshots

Embedded font CSS

@font-face {
    font-family: 'Linotte Semi Bold';
    src: url('/fonts/linotte-semi-bold.eot');
    src: url('/fonts/linotte-semi-bold.eot?#iefix') format('embedded-opentype'), 
         url('/fonts/linotte-semi-bold.woff2') format('woff2'), 
         url('/fonts/linotte-semi-bold.woff') format('woff'), 
         url('/fonts/linotte-semi-bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Answer 1

As we speak I've just received confirmation from MyFonts that sometimes fonts are configured slightly different depending on the font used and may need some tweaking to the Hinting settings when downloading a webfont kit.

The following steps fixed the issue regarding the letter 'A' and now displays correctly as expected:

You may want to try downloading a webfont kit configured to use a different Hinting setting.

Simply log into your MyFonts order history at: https://www.myfonts.com/my/orders/kitbuild.html

Select the webfont you would like to use.

Under the 'Hinting' sub-head, select 'Smooth', 'Native', or 'None' (Best was the default). It may take a couple of tries, depending on the font and how it's used.

The custom Webfont Kit Builder will select a CSS script by default. If you would prefer to use JS, simply change this option at the bottom of the page.

Download the new kit and replace the existing webfonts/stylesheet in your server.