Grapher PNG & SVG exports have bad fonts on some operating systems, causing text to overflow

[danielgavrilov]

Currently, if a user downloads an SVG or PNG, we don't have the page webfonts propagating to the images, but their system fonts end up being used. Since most users don't have Lato or Playfair Display installed, they end up with some fallback system fonts. This can cause problems with text wrapping if the font used is wider than the Google font.

On macOS and Windows we have reasonable fallbacks that match Lato (Arial) and Playfair Display (Georgia).

Image with fallback fonts (macOS)

Image with intended Google fonts

---

But there are operating systems that don't have any reasonable font (like maybe Ubuntu?), and fall back to some fonts that don't closely match our fonts.

Image from user (tweet)

---

This is not only a visual style problem, but the text wrapping logic we use depends on a font being used that matches the width of the original fonts. If it's smaller than the original, it's mostly fine, but if it's larger than the original, then text can overflow, as on the image above.

[danielgavrilov]

Approach 1: Load the webfonts

I tried to fix this by adding this at the beginning of the <svg>:

<style>
    @import url(https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,700i|Playfair+Display:400,700&amp;display=swap)
</style>

This works when you load the SVG in the browser, but there is a delay until the font loads, and until then we are displaying system fonts.

It doesn't work for PNG exports, because the font is not loaded at the time we convert the SVG → PNG. Not sure if there is a way to wait for the request to complete before generating the PNG, it seems that's what would be necessary with this approach.

Approach 2: Pick a better fallback for most operating systems

We should check the most popular operating systems for good alternatives to Lato and Playfair Display, and add those to our font-family.

I think we currently don't have a good fallback for most Android phones.

[larsyencken]

Seems like the second approach is better, given that it will work for PNG exports. We would want fonts that are either similar width, or slightly narrower.

[danielgavrilov]

Yes, and a major platform we don't have a good fallback font for is Android, which is also the OS in the screenshot and defaults to "Droid Serif". Finding a good font there is probably good enough to close this issue.

[larsyencken]

Closing this now, @samizdatco you can perhaps re-open a new issue if need be that better reflects any remaining font issues for exports.