fix: For garbled non-Latin characters in certificate PDFs - #3685
Open
daniellefrappier18 wants to merge 1 commit into
Open
fix: For garbled non-Latin characters in certificate PDFs#3685daniellefrappier18 wants to merge 1 commit into
daniellefrappier18 wants to merge 1 commit into
Conversation
daniellefrappier18
marked this pull request as ready for review
July 27, 2026 18:08
OpenAPI ChangesNo changes detected Unexpected changes? Ensure your branch is up-to-date with |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the certificate PDF generation route (Next.js App Router route.tsx using @react-pdf/renderer) to prevent garbled output for learner names containing non‑Latin characters by registering additional Noto Sans font files and attempting to apply them as fallbacks in text styling.
Changes:
- Registers Noto Sans (latin-ext), Noto Sans SC, and Noto Sans TC fonts (400/700) from a version-pinned CDN.
- Introduces shared font “stacks” (
FONT_STACK_400,FONT_STACK_700) and replaces prior single-fontfontFamilyassignments to use those stacks across the PDF layout.
Comment on lines
+99
to
+110
| const FONT_STACK_400 = [ | ||
| "Neue Haas Grotesk Text 400", | ||
| "Noto Sans 400", | ||
| "Noto Sans SC 400", | ||
| "Noto Sans TC 400", | ||
| ] | ||
| const FONT_STACK_700 = [ | ||
| "Neue Haas Grotesk Text 700", | ||
| "Noto Sans 700", | ||
| "Noto Sans SC 700", | ||
| "Noto Sans TC 700", | ||
| ] |
Contributor
Author
There was a problem hiding this comment.
react-pdf types fontFamily as string | string[] and its layout engine turns the array into a per-character fallback stack (loading every family), so it typechecks and works at runtime
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What are the relevant tickets?
Fixes https://github.com/mitodl/hq/issues/12554
Fixes https://github.com/mitodl/hq/issues/12475
Description (What does it do?)
Learners with non-Latin characters in their name see garbled/blank text when they use the certificate Print / download PDF
The certificate PDF route renders with
@react-pdf/renderer, which embeds only the fonts we register — the Latin-only Neue Haas Grotesk brand font — and, unlike a browser, does no automatic system-font fallback. Any character outside that font's glyph set (all CJK, plus some extended-Latin letters) has no glyph to render, so it comes out garbled.This is why the bug is print-only: the live certificate page is HTML, so the browser silently substitutes a system font for those characters. The PDF has nothing to fall back to.
fontFamilystack for every text element via two shared stacks (FONT_STACK_400FONT_STACK_700).@react-pdf/rendererresolves fonts per-character, so branded text stays in Neue Haas Grotesk and only the unsupported glyphs fall through to Noto.Screenshots (if appropriate):
BEFORE
AFTER
How can this be tested?
.../admin/users/user/<id>/change/) — set Name to something like志云 黄 / YAVUZHAN ÇAĞRIand save.Additional Context
The PDF route fetches the Noto fonts (~2.5 MB CJK) from the CDN on the first render after a cold start, then caches in-process — same remote-dependency model as the existing brand font.