docsy theme still causes outgoing connections to Google Fonts for Arabic and Hebrew languages

[anoadragon453]

We use the docsy theme as part of spec.matrix.org / (source code). The changes we've currently made downstream to docsy are listed at google/docsy@main...matrix-org:docsy:master.

In terms of preventing fonts being loaded from google fonts, we've so far replaced the default font (Open Sans) with Inter, and replaced the default behaviour of loading the font from Google Fonts with a locally downloaded copy. That local copy was generated using a custom script, download_google_fonts_css.py.

Note that the replacement code above requires setting $td-enable-google-fonts to true (the default) in order for docsy to load our font.

In addition to this default font, docsy also downloads some extra fonts for Persian, Arabic and Hebrew:

docsy/assets/scss/rtl/_main.scss

Lines 33 to 51 in 66a4e61

	body:lang(fa) {
	@import url('https://cdn.jsdelivr.net/gh/rastikerdar/[email protected]/dist/font-face.css');
	font-family: 'Vazir', "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}
	body:lang(he) {
	@if $td-enable-google-fonts {
	@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');
	}
	font-family: 'Rubik', "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}
	body:lang(ar) {
	@if $td-enable-google-fonts {
	@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
	}
	font-family: 'Tajawal', "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

Hebrew and Arabic are loaded from Google Fonts, whereas Persian is loaded via cdn.jsdelivr.net.

Ideally we'd host these locally as well, though the font-family: 'Rubik', "Open Sans", ... line above indicates that Open Sans acts as a fallback in these cases, so it appears fine to disable them completely - the font just might not look as nice.

I'd like to disable loading fonts from Google Fonts (and ideally all third-party sources) entirely, while also keeping the number of downstreams changes to docsy to a minimum. Therefore I propose we:

• Remove the current hack to set the default font to Inter.
• Import Inter directly ourselves: @import url("../css/fonts/Inter.css").
• Set $font-family-sans-serif to what docsy defines, but with "Inter" prepended. (Unfortunately we can't import this from docsy and prepend, as our variables will be loaded first.)
• Set $td-enable-google-fonts to false.

The above should prevent any attempts to load fonts from Google Fonts, but we're still left with loading Vazir from cdn.jsdelivr.net. That can be fixed with some more surgery on our fork of docsy, but let's leave that to a separate issue.

cc @jaller94

[anoadragon453]

Merging matrix-org/matrix-spec#1295 should prevent Google Fonts from loading.

As stated above, Vazir will still be loaded from cdn.jsdelivr.net for the Persian language. But let's tackle that separately.

[anoadragon453]

Closing this issue as its about Google Fonts, which we no longer connect to as we set $td-enable-google-fonts to false.

In addition, the Vazir font loading was dropped in docsy v0.11.0. So we no longer have any external connections to CDNs! 🥳