Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Truetype version rendering incorrectly #26

Open
jprestel-rue opened this issue Oct 15, 2020 · 10 comments
Open

Truetype version rendering incorrectly #26

jprestel-rue opened this issue Oct 15, 2020 · 10 comments

Comments

@jprestel-rue
Copy link

jprestel-rue commented Oct 15, 2020 •
edited
Loading

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.

image

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
Copy link

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

@jprestel-rue
Copy link
Author

I'm using Chrome 86.0.4240.75 on Mac OS X.

image

@jprestel-rue
Copy link
Author

I can also reproduce in Firefox 81.0.1 on Mac

image

@jprestel-rue
Copy link
Author

And also in Safari 14.0 on Mac

image

@rdtennent
Copy link

rdtennent commented Oct 16, 2020 via email

@jprestel-rue
Copy link
Author

jprestel-rue commented Oct 16, 2020 •
edited
Loading

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

Firefox 81.0.2

image

Edge 86.0.622.43

image

Linux

Chrome 86

image

Firefox 81

image

@rdtennent
Copy link

rdtennent commented Oct 16, 2020 via email

@jprestel-rue
Copy link
Author

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
Copy link

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

@Artoria2e5
Copy link

Artoria2e5 commented Feb 9, 2021 •
edited
Loading

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?)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@rdtennent @Mushr0000m @Artoria2e5 @jprestel-rue