Set explicitly font-display: block to exchange "flash of unstyled text" (FOUT) for “flash of invisible text” (FOIT)? (#4481)

https://github.com/zauberzeug/nicegui/discussions/4477

---------

Co-authored-by: Falko Schindler <falko@zauberzeug.com>

fetch_google_fonts.py

@@ -39,4 +39,7 @@ for font_url in re.findall(r'url\((.*?)\)', css):
 css = css.replace('https://fonts.gstatic.com/s/materialicons/v140', 'fonts')
 css = css.replace('https://fonts.gstatic.com/s/roboto/v30', 'fonts')
 css = css.replace("'", '"')
+# for each @font-face block, add font-display: block
+css = re.sub(r'@font-face\s*{\s*font-family:\s*"Material',
+             r'@font-face {\n  font-display: block;\n  font-family: "Material', css)
 Path('nicegui/static/fonts.css').write_text(css, encoding='utf-8')

nicegui/static/fonts.css

@@ -1,6 +1,7 @@
 /* prettier-ignore */
 /* fallback */
 @font-face {
+  font-display: block;
   font-family: "Material Icons";
   font-style: normal;
   font-weight: 400;
@@ -8,6 +9,7 @@
 }
 /* fallback */
 @font-face {
+  font-display: block;
   font-family: "Material Icons Outlined";
   font-style: normal;
   font-weight: 400;
@@ -15,6 +17,7 @@
 }
 /* fallback */
 @font-face {
+  font-display: block;
   font-family: "Material Icons Round";
   font-style: normal;
   font-weight: 400;
@@ -22,6 +25,7 @@
 }
 /* fallback */
 @font-face {
+  font-display: block;
   font-family: "Material Icons Sharp";
   font-style: normal;
   font-weight: 400;
@@ -430,6 +434,7 @@
 
 /* fallback */
 @font-face {
+  font-display: block;
   font-family: "Material Symbols Outlined";
   font-style: normal;
   font-weight: 400;
@@ -437,6 +442,7 @@
 }
 /* fallback */
 @font-face {
+  font-display: block;
   font-family: "Material Symbols Rounded";
   font-style: normal;
   font-weight: 400;
@@ -444,6 +450,7 @@
 }
 /* fallback */
 @font-face {
+  font-display: block;
   font-family: "Material Symbols Sharp";
   font-style: normal;
   font-weight: 400;