Skip to content

feat: multiple fonts fallbacks #8286

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
Merged
merged 5 commits into from
Jul 30, 2024
Merged

feat: multiple fonts fallbacks #8286

merged 5 commits into from
Jul 30, 2024

Conversation

@Mrazator
Copy link
Member

@Mrazator Mrazator commented Jul 26, 2024 •
edited
Loading

Adds the possibility to specify an array of base URLs in EXCALIDRAW_ASSET_PATH, so that we could register font faces for our bundled fonts with multiple fallbacks, in case of unreachable resources due to:

  • network restrictions (vpns, corporate policies, firewalls etc.)
  • ad blocker Fonts no longer load #8290 (only solves first-party if an appropriate filter is set to allow such fonts)
  • offline mode
  • unknowns

Excalidraw-app now has three font URLs for our bundled fonts:

  • DO CDN
  • Root domain excalidraw.com [fallback]
  • UNPKG CDN [fallback]

Fonts are fetched in the order specified above (with automatic fallbacks), for both:

  1. window.document.fonts.load API
    • out-of-the-box fallbacks due to multiple sources specified as part of the FontFace object in a CSS familiar @font-face#source manner
  2. fetch for SVG fonts inlining
    • added custom fallback mechanism
    • in case none of the URLs is reached (i.e. when working offline), we will just inline the last specified URL (unpkg for our bundled fonts or whatever URL we have for other fonts)

Additional improvements:

  • setting CORS for excalidraw.com as the only origin for all the new fonts
  • treating DO CDN as SSOT with a build-step

@vercel
Copy link

vercel bot commented Jul 26, 2024 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
excalidraw ✅ Ready (Inspect) Visit Preview Jul 30, 2024 8:15am
excalidraw-package-example ✅ Ready (Inspect) Visit Preview Jul 30, 2024 8:15am
excalidraw-package-example-with-nextjs ✅ Ready (Inspect) Visit Preview Jul 30, 2024 8:15am
1 Skipped Deployment
Name Status Preview Updated (UTC)
docs ⬜️ Ignored (Inspect) Visit Preview Jul 30, 2024 8:15am

@Mrazator Mrazator force-pushed the mrazator/fonts-fallbacks branch from 88dae08 to 1ba89f0 Compare July 26, 2024 17:11
@github-actions
Copy link

github-actions bot commented Jul 26, 2024 •
edited
Loading

Coverage Report

Status Category Percentage Covered / Total
🔴 Lines 65.82% (🎯 70%) 54562 / 82890
🔴 Statements 65.82% (🎯 70%) 54562 / 82890
🔴 Functions 67.24% (🎯 68%) 1628 / 2421
🟢 Branches 80.6% (🎯 70%) 6604 / 8193
File Coverage
File Stmts % Branch % Funcs % Lines Uncovered Lines
Changed Files
packages/excalidraw/components/FontPicker/FontPickerList.tsx 18.28% 100% 100% 18.28% 48-264, 266-267
packages/excalidraw/fonts/ExcalidrawFont.ts 75.47% 61.9% 100% 75.47% 11, 48-50, 68-88, 114-118, 132-133, 137-138, 148-152
packages/excalidraw/fonts/index.ts 82.73% 86.36% 91.66% 82.73% 57-58, 66-67, 91-96, 101-119, 134-156, 288
packages/excalidraw/fonts/metadata.ts 100% 100% 100% 100%
packages/excalidraw/scene/export.ts 86.82% 76.27% 77.77% 86.82% 53-78, 98-99, 108, 160-161, 185-189, 322-323, 374, 380-385, 388-390, 444-448, 469-478
scripts/woff2/woff2-vite-plugins.js 0% 0% 0% 0% 1-132
Generated in workflow #2906

@Mrazator Mrazator force-pushed the mrazator/fonts-fallbacks branch from 1ba89f0 to e8665a9 Compare July 26, 2024 17:15
@Mrazator Mrazator force-pushed the mrazator/fonts-fallbacks branch from e8665a9 to 93ba0f3 Compare July 26, 2024 17:37
@Mrazator Mrazator force-pushed the mrazator/fonts-fallbacks branch from 93ba0f3 to 856aa7d Compare July 26, 2024 17:43
@Mrazator Mrazator marked this pull request as ready for review July 26, 2024 17:44
@Mrazator Mrazator self-assigned this Jul 26, 2024
@Mrazator Mrazator requested a review from dwelle July 26, 2024 17:44
@Mrazator Mrazator force-pushed the mrazator/fonts-fallbacks branch from 856aa7d to 226ca09 Compare July 26, 2024 17:50
@Mrazator Mrazator force-pushed the mrazator/fonts-fallbacks branch from 226ca09 to c6e443b Compare July 26, 2024 17:50
This was referenced Jul 28, 2024
Closed
Merged
@Mrazator Mrazator force-pushed the mrazator/fonts-fallbacks branch from adc9217 to 94cdb0e Compare July 29, 2024 14:39
@dwelle
Copy link
Member

dwelle commented Jul 29, 2024

👍

@Mrazator Mrazator force-pushed the mrazator/fonts-fallbacks branch from 2aa4cbf to 20ecd07 Compare July 30, 2024 08:11
@Mrazator Mrazator merged commit 230d0ed into master Jul 30, 2024
@Mrazator Mrazator deleted the mrazator/fonts-fallbacks branch July 30, 2024 08:34
@Mrazator Mrazator mentioned this pull request Jul 31, 2024
Closed
4 tasks
@zsviczian
Copy link
Collaborator

zsviczian commented Jul 31, 2024

If Helvetica is used in the scene I get this error
image

@Mrazator
Copy link
Member Author

Mrazator commented Jul 31, 2024

It's probably because I've let it register Helvetica font face (line changed below), since I did not observe any impact. Is this thrown for some reason just in Electron? I cannot repro on the PR deployment.

https://github.com/excalidraw/excalidraw/pull/8286/files#diff-f5ccf5aca114071dcadadf871453d462f106971c70d3face46b3a855664e13bfL127

@Mrazator Mrazator mentioned this pull request Jul 31, 2024
Merged
@Mrazator
Copy link
Member Author

Mrazator commented Jul 31, 2024

@zsviczian could you perhaps confirm #8303 solves this?

@zsviczian
Copy link
Collaborator

zsviczian commented Aug 1, 2024

I confirm #8303 solves the issue.

The screenshot above is from Excalidraw web: https://excalidraw-7vmwury8n-excalidraw.vercel.app/#json=t11M0HM6UHAPuCgd97kcC,BjJyC9R4u_fj73hS_U5QJQ

I used the preview from the most recently merged PR: #8302

@Mrazator Mrazator mentioned this pull request Feb 12, 2025
Merged
18 tasks
@bric3 bric3 mentioned this pull request Mar 12, 2025
Open
9 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dwelle dwelle dwelle approved these changes

Assignees

@Mrazator Mrazator

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@Mrazator @dwelle @zsviczian