Ensure text remains visible during webfont load

Avoid a flash of invisible text (FOIT) by using temporarily using system fonts until the fonts have been loaded. This was one of the complaints we got from Google Lighthouse.

Having the repository's display font "flash" isn't exactly pretty, but IMHO a bit less weird than a FOIT.

invenio_theme_tuw/theme/assets/semantic-ui/less/invenio_theme_tuw/theme/custom/fonts.less

@@ -6,72 +6,84 @@
   src: url("@{font-path}/Roboto-Thin.ttf") format("truetype");
   font-weight: 100; /* thin, hairline */
   font-style: normal;
+  font-display: swap;
 }
 @font-face {
   font-family: "Roboto";
   src: url("@{font-path}/Roboto-Light.ttf") format("truetype");
   font-weight: 300; /* light */
   font-style: normal;
+  font-display: swap;
 }
 @font-face {
   font-family: "Roboto";
   src: url("@{font-path}/Roboto-Regular.ttf") format("truetype");
   font-weight: 400; /* normal, regular */
   font-style: normal;
+  font-display: swap;
 }
 @font-face {
   font-family: "Roboto";
   src: url("@{font-path}/Roboto-Medium.ttf") format("truetype");
   font-weight: 500; /* medium */
   font-style: normal;
+  font-display: swap;
 }
 @font-face {
   font-family: "Roboto";
   src: url("@{font-path}/Roboto-Bold.ttf") format("truetype");
   font-weight: 700; /* bold */
   font-style: normal;
+  font-display: swap;
 }
 @font-face {
   font-family: "Roboto";
   src: url("@{font-path}/Roboto-Black.ttf") format("truetype");
   font-weight: 900; /* black, heavy */
   font-style: normal;
+  font-display: swap;
 }
 @font-face {
   font-family: "Roboto";
   src: url("@{font-path}/Roboto-ThinItalic.ttf") format("truetype");
   font-weight: 100; /* thin, hairline */
   font-style: italic;
+  font-display: swap;
 }
 @font-face {
   font-family: "Roboto";
   src: url("@{font-path}/Roboto-LightItalic.ttf") format("truetype");
   font-weight: 300; /* light */
   font-style: italic;
+  font-display: swap;
 }
 @font-face {
   font-family: "Roboto";
   src: url("@{font-path}/Roboto-Italic.ttf") format("truetype");
   font-weight: 400; /* normal, regular */
   font-style: italic;
+  font-display: swap;
 }
 @font-face {
   font-family: "Roboto";
   src: url("@{font-path}/Roboto-MediumItalic.ttf") format("truetype");
   font-weight: 500; /* medium */
   font-style: italic;
+  font-display: swap;
 }
 @font-face {
   font-family: "Roboto";
   src: url("@{font-path}/Roboto-BoldItalic.ttf") format("truetype");
   font-weight: 700; /* bold */
   font-style: italic;
+  font-display: swap;
 }
 @font-face {
   font-family: "Roboto";
   src: url("@{font-path}/Roboto-BlackItalic.ttf") format("truetype");
   font-weight: 900; /* black, heavy */
   font-style: italic;
+  font-display: swap;
 }
 
 /* PT Sans */
@@ -80,22 +92,26 @@
   src: url("@{font-path}/PTSans-Regular.ttf") format("truetype");
   font-weight: 400; /* normal, regular */
   font-style: normal;
+  font-display: swap;
 }
 @font-face {
   font-family: "PT Sans";
   src: url("@{font-path}/PTSans-Bold.ttf") format("truetype");
   font-weight: 700; /* bold */
   font-style: normal;
+  font-display: swap;
 }
 @font-face {
   font-family: "PT Sans";
   src: url("@{font-path}/PTSans-Italic.ttf") format("truetype");
   font-weight: 400; /* normal, regular */
   font-style: italic;
+  font-display: swap;
 }
 @font-face {
   font-family: "PT Sans";
   src: url("@{font-path}/PTSans-BoldItalic.ttf") format("truetype");
   font-weight: 700; /* bold */
   font-style: italic;
+  font-display: swap;
 }