PDF web rendering error

Using Fonts
1

I’m having an issue with a 4-axis variable font I designed in Glyphs 3. It’s not displaying correctly in certain situations on web. When using the font in an InDesign document, and after exporting to a PDF, the type looks fine. When viewed through the pdf viewer in the project management site ClickUp, the issue occurs. As shown in the attachments, the right halves of each glyph are cut off.

Is this a known issue with some online PDF viewers? Is there a way to edit the font on my end to avoid the rendering error?

Thanks!

Screenshot 2024-09-13 at 1.39.34 PM
Screenshot 2024-09-13 at 1.39.34 PM702×230 7.06 KB

Screenshot 2024-09-13 at 1.39.03 PM
Screenshot 2024-09-13 at 1.39.03 PM2516×630 29.5 KB

2

Do you happen to use FireFox?

3

I don’t, but I can try viewing the pdf there.

4

Interesting, the PDF shows correctly in ClickUp’s viewer in Firefox. Any idea where the issue might come from, between Mac > Adobe > Chrome > ClickUp?

5

Can you be more specific what happens where?

6

The font displays correctly in InDesign, in an exported PDF viewed from Mac’s Finder, in a PDF viewed by itself in a Chrome tab, and in a PDF viewed in ClickUp’s PDF viewer in FireFox. The only instance that displays incorrectly is in the ClickUp PDF viewer in Chrome on Mac.

7

Is this happening with all of your fonts? And does it makes a difference where you make the PDF?

8

I’ve never run into this issue before with other variable fonts, but I’ll test some out across various adobe apps.

9

I mean if you make the PDF from Pages or so.

10

I don’t have Pages, but I tried exporting to a pdf from Word, which strangely sets the variable font to Calibri.

11

Or TextEdit, Cmd-P and Save as PDF.

12

The font displays ok in TextEdit, but after PDF export, a thin strip at the top of the first line of text is cut off.

Screenshot 2024-09-16 at 10.49.22 AM
Screenshot 2024-09-16 at 10.49.22 AM1396×1176 118 KB

Variable_Test_3.pdf (9.4 KB)

13

Can you check with fontbakery.com? This sounds like some vertical metrics issue.

14

Fontbakery returned some master/instance value/table inconsistencies, which I haven’t delved too deeply into, so once I get around to those I’ll see if that fixes the issue. Thanks for the suggestion!

15

What profile did you use?

16

Universal and Opentype so far.

17

Try TypeNetwork.

18

It returned the following checks/warnings that might have something to do with the cropping:

  • The font will display significantly vertically uncentered on web environments. Top space above cap height is 300 and under baseline is 200
  • OS/2 sTypoAscender (700) and hhea ascent (1000) must be equal.
  • hhea lineGap is not equal to 0.
19

Yes, must be equal. They do the same thing in different environments.

Doesn’t matter. Use them to control the gap between lives. Just make sure, again, that hhea and typo values are in sync.

20

Will do, thanks!