Search code examples
cssfontsfont-smoothing

Ragged website font on Windows


I've been building this site for a while, however the font I use for headers looks ragged on Windows using Chrome, although it looks perfect on Mac or using Edge: Link
I did try the various font smoothing properties to no avail and using text-shadow makes it look strange. Is there anything else I can try?


Solution

  • The font I use for headers looks ragged on Windows using Chrome

    1. Your webkit-font-smoothing rule is missing a - prefix, it should be -webkit-font-smoothing

    2. To solve the issue of Chrome font-rendering, add -webkit-text-stroke: 0.3px;

    Difference:

    chrome font difference

    Final code:

    h1, h2 {
        -webkit-font-smoothing: subpixel-antialiased;
        -webkit-text-stroke: 0.3px;
    }
    

    * You may need to apply the above CSS to all selectors that use the custom font.


    Preview

    chrome font smoothing preview

    Original answer: https://stackoverflow.com/a/11493510/877671 voting to close as duplicate.