UbuntuMono font in SVG not rendered on non-Ubuntu system

[CFGrote]

Hi,
I'm submitting this issue as part of my instructor training checkout.

This issue is related to the Lesson "Programming with Python", Episode 2 "Analysing patient data".

Summary

I noticed that the image fig/python-zero-index.svg does not render nicely on my (non-ubuntu) system, see this screenshot:

Inspecting the svg source, I noticed that it uses UbuntuMono fonts, which are not installed on my system (Debian 11).
After installing the fonts, the image renders nicely:

Attempted solution

I tried to embed the missing font in the svg, the patched file is attached here.

Testing locally, the image then renders nicely, even when I remove the locally installed font.
I then pushed it to my fork, but the online version still does not render correctly. My browser log tells me

Content Security Policy: The page’s settings blocked the loading of a resource at https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700 (“style-src”).

Possible solutions:

1. If possible, adjust security setting to allow loading fonts
2. Change font to something more widely used (e.g. Helvetica, Noto)
3. Use different way to embed font in svg (other than @import).

I'm also mentioning #494 as this seems to be related.

Any comments or ideas?

Thanks!

[maxim-belkin]

@CFGrote, could you please have a look into embedding the Ubuntu font into the SVG using base64-encoding, e.g. something along the lines the procedure described at https://lvngd.com/blog/how-embed-google-font-svg ?

IIRC, the reason Ubuntu font was chosen was that it is easier to read for people with dyslexia, so unless The Carpentries recommend a different font, we should try to support/use it.