Cabin
Cabin copied to clipboard
impallari
Truetype version rendering incorrectly
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>
I can't duplicate this on Chrome or in xelatex. What browser are you using?
OK, not the browser. Try it on Windows or Linux.
On Fri, Oct 16, 2020 at 12:21 PM John Prestel [email protected] 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 .
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
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 [email protected] 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 .
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 🙃
Same here, on MacOS the letter A as an issue (Capture from the JSfiddle) :
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?)
