Truetype version rendering incorrectly

jprestel-rue commented 3 years ago

When using the truetype version of the font, I'm seeing uppercase A render incorrectly. It has white gaps in the middle of the letter, where the horizontal bar of the A meets the sides. It sort of looks like it's the corners of the horizontal bar, where they overlap with the sides.

Note that the woff2 version of the font does NOT have this issue. I did not test every other file format Google offers.

You can reproduce with this code:

<head>
<title>Test</title>
<style>
    @font-face {
        font-family: 'Cabin';
        font-style: italic;
        font-weight: 400;
        font-stretch: normal;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/cabin/v17/u-4V0qWljRw-Pd815fNqc8T_wAFcX-c37MPiNYlWniJ2hJXHx_Klwg.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Cabin';
        font-style: italic;
        font-weight: 600;
        font-stretch: normal;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/cabin/v17/u-4V0qWljRw-Pd815fNqc8T_wAFcX-c37MPiNYlWniJ2hJXHGfWlwg.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Cabin';
        font-style: normal;
        font-weight: 400;
        font-stretch: normal;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/cabin/v17/u-4X0qWljRw-PfU81xCKCpdpbgZJl6XFpfEd7eA9BIxxkV2EL7E.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Cabin';
        font-style: normal;
        font-weight: 600;
        font-stretch: normal;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/cabin/v17/u-4X0qWljRw-PfU81xCKCpdpbgZJl6XFpfEd7eA9BIxxkYODL7E.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Cabin';
        font-style: normal;
        font-weight: 700;
        font-stretch: normal;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/cabin/v17/u-4X0qWljRw-PfU81xCKCpdpbgZJl6XFpfEd7eA9BIxxkbqDL7E.ttf) format('truetype');
    }
    h1 {
        font-family: 'Cabin';
    }
</style>
</head>
<body>
    <h1>Aesop</h1>
</body>

rdtennent commented 3 years ago

I can't duplicate this on Chrome or in xelatex. What browser are you using?

jprestel-rue commented 3 years ago

I'm using Chrome 86.0.4240.75 on Mac OS X.

jprestel-rue commented 3 years ago

I can also reproduce in Firefox 81.0.1 on Mac

jprestel-rue commented 3 years ago

And also in Safari 14.0 on Mac

rdtennent commented 3 years ago

OK, not the browser. Try it on Windows or Linux.

On Fri, Oct 16, 2020 at 12:21 PM John Prestel notifications@github.com wrote:

And also in Safari 14.0 on Mac

[image: image] https://user-images.githubusercontent.com/17439030/96283355-179db300-0faa-11eb-8411-191ce057e16d.png

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/impallari/Cabin/issues/26#issuecomment-710169381, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAUZWNRG7GSJCUJ65XU4NZ3SLBXJLANCNFSM4SSJ2VOQ .

jprestel-rue commented 3 years ago

Tested on Windows and Linux in various browsers and it looks fine there. Sounds like the combination of MacOS X and TrueType are the culprit.

Using this jsfiddle to make testing slightly easier: https://jsfiddle.net/yhu80acj/

Windows

Chrome 86.0.4240.75

Firefox 81.0.2

Edge 86.0.622.43

Linux

Chrome 86

Firefox 81

rdtennent commented 3 years ago

You could try the OTFs at https://github.com/impallari/Cabin/tree/master/fonts/OTF

On Fri, Oct 16, 2020 at 1:53 PM John Prestel notifications@github.com wrote:

Tested on Windows and Linux in various browsers and it looks fine there. Sounds like the combination of MacOS X and TrueType are the culprit.

Using this jsfiddle to make testing slightly easier: https://jsfiddle.net/yhu80acj/ Windows Chrome 86.0.4240.75

[image: image] https://user-images.githubusercontent.com/17439030/96291331-e4612100-0fb5-11eb-86f0-cb35b08ae7bb.png Firefox 81.0.2

[image: image] https://user-images.githubusercontent.com/17439030/96291381-f216a680-0fb5-11eb-8d1b-e336151d4e42.png Edge 86.0.622.43

[image: image] https://user-images.githubusercontent.com/17439030/96291481-15d9ec80-0fb6-11eb-8522-46a5cec06a8a.png Linux

No screenshots, but it worked fine in Firefox 81 and Chrome 86 OS there was Ubuntu 20.04

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/impallari/Cabin/issues/26#issuecomment-710313029, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAUZWNQ3IOHH674EDMGCIF3SLCCDPANCNFSM4SSJ2VOQ .

jprestel-rue commented 3 years ago

We're working around this by just using the WOFF2 files. I just wanted to file a bug report for the TrueType format on Mac in case that's fixable so other folks don't run into the same 🙃

Mushr0000m commented 3 years ago

Same here, on MacOS the letter A as an issue (Capture from the JSfiddle) : Capture d’écran 2021-01-21 à 12 06 51

Artoria2e5 commented 3 years ago

This seems to be a known macOS issue where they did even-odd filling instead of non-zero-winding filling. There is a very poorly documented flag to... fix this issue. See http://twardoch.github.io/test-fonts/varia/160413-EvenOddTT/.

(Apple, why?)

impallari / Cabin