Font not rendering/displaying correctly?

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

Answers


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.


Try this, it fixed some of my font appearance in the past, but it's kind of a shot in the dark. That "A" really looks strange, does it look the same if you install the font on your system and use it in photoshop or word or anything else?

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

Need Your Help

Form with file filed in CakePHP

file cakephp forms

How get name of field type file in beforeSave()?

How to get Maven testResources directories inside pom

maven variables pom.xml elements

In Maven pom.xml I can get some of the build values, that were defined in the build section. for example ${project.build.testSourceDirectory}: