excalidraw

excalidraw copied to clipboard

Supersedes #6479

In the case that the external Excalidraw font WOFF2 files cannot be requested from the various font URLs eg. https://excalidraw.com/Virgil.woff2, then provide fallbacks for Windows, macOS and Linux.

This can happen if the SVG is loaded in an environment with a Content Security Policy set up, like if an SVG file is included in a readme on GitHub:

• https://github.com/excalidraw/excalidraw/issues/4855

For example, the following screenshot was taken of the broken fonts in an Excalidraw SVG file which was rendered in a Markdown file on GitHub:

Before                                       fallback: Segoe UI Emoji	After fallback: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace, 'Segoe UI Emoji'

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

Name	Status	Preview	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	Jun 28, 2023 9:08am
excalidraw	✅ Ready (Inspect)	Visit Preview	Jun 28, 2023 9:08am
excalidraw-package-example	✅ Ready (Inspect)	Visit Preview	Jun 28, 2023 9:08am

@dwelle anything else that should be changed here? Just fixed the conflict introduced from merging #6216

@dwelle or if there is anyone else that can review it, happy to receive a review from another maintainer :)

@dwelle or @ad1992 just merged master into the branch again and again fixed conflicts

Any chance to get a review on this sometime soon?

Thank you for making this. I was just looking into the issue myself and I found this PR.

I have one comment: would you consider de-prioritizing Comic Sans as the default handdrawn? Fairly or not, that font has a lot of baggage and some readers may find it off-putting. I believe something like Gill Sans is a good alternative, since it is widely available and well-regarded. But many other good options exist among the humanist sans serifs.

@dwelle or @ad1992 just merged master into the branch again and again fixed conflicts

Any chance to get a review on this sometime soon?

Hey @karlhorky thanks for the PR. I will try to get back on this by today EOD

I have one comment: would you consider de-prioritizing Comic Sans as the default handdrawn? Fairly or not, that font has a lot of baggage and some readers may find it off-putting. I believe something like Gill Sans is a good alternative

I don't have a strong opinion on which hand-drawn default font to take, so happy to take suggestions.

Gill Sans does not look hand drawn, however:

So Comic Sans still wins for "hand drawn"

@karlhorky to confirm this PR adds fallback for all fonts to make sure that fallbacks work for all fonts in all platforms in all environments and not just windows - as earlier we were just doing fallback for windows ?

One concern here - since all fonts could have diff dimensions so there is a probability that layout might break, is there anything we can do to minimise this ? Even if we re-render the layout when font fallbacks to make sure UI is up to date but that wouldn't work for SVG

cc @dwelle

to confirm this PR adds fallback for all fonts to make sure that fallbacks work for all fonts in all platforms in all environments and not just windows - as earlier we were just doing fallback for windows ?

Kind of - it's more like:

1. add fallbacks for viewing SVGs in environments such as GItHub readmes (which include a CSP) which cannot make requests to the external Excalidraw font .woff2 files
2. do not alter fonts for environments which can load the .woff2 font files

An example of the broken fonts can be seen in https://github.com/excalidraw/excalidraw/issues/4855#issue-1155283310

One concern here - since all fonts could have diff dimensions so there is a probability that layout might break, is there anything we can do to minimise this ?

Good point! In my testing, it hasn't been a problem (I only tested the monospace font fallback, and only on GitHub) - the font size was more similar to the original Excalidraw font (fully sized) than the Segoe UI Emoji was.

So the answer is, from my limited testing: it will be less broken than it currently is in Excalidraw production.

@karlhorky sounds good . I completely agree cases where making external requests isn't possible due to CSP we should fallback to fonts with similar categories which you are doing

I will also add a comparison here to make things clear 👇🏻 for cases like GH readme

ORIGINAL

PROD

NOW

However one more alternative could be to append the fonts into svg to make sure they always load the font which we are using - though this could increase the size of svg but still we could give it a thought similar to how @zsviczian is doing as mentioned in https://github.com/excalidraw/excalidraw/issues/4855#issuecomment-1055625525

What do you think ? cc @dwelle

append the fonts into svg to make sure they always load the font which we are using - though this could increase the size of svg

Right, also as I mentioned in Workaround 1

If this would be an always-on option, I think that the downsides of different fonts in these in these environments (which see limited usage) would not outweigh the downsides of the increased file size by embedding the font.

However, if this was an option during export eg. "Embed fonts", then maybe this would be a good tradeoff for use cases in these environments... 🤔

@ad1992 what are your thoughts?

@ad1992 @dwelle Hi there, any chance this could be reviewed again? (including my last message above)

It unfortunately again has conflicts - happy to resolve these again as soon as I get a response :)

Friendly ping @barnabasmolnar @ad1992 @dwelle @zsviczian - this is still an active bug when displaying Excalidraw diagrams on GitHub. The Excalidraw fonts look different / broken.

Can we finish this up and get it published?

This would also improve the experience of using Excalidraw diagrams in Office / Office365.

In the current state, an imported SVG image looks like this:

I typically have to hand-edit the SVG to add Segoe Print as a replacement for Virgil; and Consolas as a replacement for Cascadia:

Friendly ping @dwelle @Mrazator @ryan-di @barnabasmolnar @zsviczian @ad1992 - this is still an active bug when displaying Excalidraw diagrams on GitHub. The Excalidraw fonts look different / broken.

Is there anything else that we need to get this merged and published?

@karlhorky hi, we're working on this as part of https://github.com/excalidraw/excalidraw/pull/8012 and followups!

@dwelle amazing, thanks! 😍