pachamaltese pachamaltese - 1 year ago 58
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,

Answer Source

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;