pachamaltese pachamaltese - 2 months ago 4x
CSS Question

How to obtain nice font smooting? (and how to mimic font styles?)

I did buy Charter and Kievit for my website.

The fonts are ok and are the same used by

I use Jekyll and the smoothing is ok in most browsers but Safari.

How can I obtain a font rendering that is closer to Their website has settled a landmark for web fonts.

This is how my website looks:
enter image description here

And this is how looks:
enter image description here

I detect that my website fonts are more wider, more shorter and more thicker/blurry.

This is a part of my file `fonts.css``

@font-face {
font-family: 'Charter';
font-weight: normal;
font-style: normal;
src: url('../fonts/charter.eot');
src: url('../fonts/charter.eot?#iefix') format('embedded-opentype'),
url('../fonts/charter.woff2') format('woff2'),
url('../fonts/charter.woff') format('woff'),
url('../fonts/charter.ttf') format('truetype');

font-family: 'Kievit';
font-weight: normal;
font-style: normal;
src:url('../fonts/kievit.eot?#iefix') format('eot'),
url('../fonts/kievit.woff2') format('woff2'),
url('../fonts/kievit.woff') format('woff'),
url('../fonts/kievit.ttf') format('truetype');

Best regards,


Have you inspected the elements from Inspecting the H3 of the title of the blog you've shared via Chrome Developer Tools, shows the following ccs rendered styles

-webkit-font-smoothing: antialiased;
color: rgba(0, 0, 0, 0.8);
display: block;
font-family: medium-content-sans-serif-font, 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Arial, sans-serif;
font-size: 32px;
font-style: normal;
font-weight: bold;
height: 36px;
letter-spacing: -0.64px;
line-height: 36.8px;
margin-bottom: 0px;
margin-left: -2px;
margin-right: 0px;
margin-top: 39px;
visibility: visible;
width: 702px;
word-wrap: break-word;