provide easy @import CDN directives for fonts

Author: dginev

css/ar5iv-fonts.css

@@ -0,0 +1,79 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:[email protected]');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400..700;1,400..700');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400..700;1,400..700');
+@import url('https://fonts.googleapis.com/css2?family=STIX+Two+Math');
+
+/*======================================================================
+   Fallback fonts -- check locally if CDN access is blocked. */
+   @font-face{
+    font-display: fallback;
+    font-family: "Noto Sans Mono Fallback";
+    font-style: normal;
+    font-weight: 700;
+    src: local("Noto Sans Mono Bold"),
+         local("NotoSansMono-Bold"); }
+  @font-face{
+    font-display: fallback;
+    font-family: "Noto Sans Mono Fallback";
+    font-style: normal;
+    src: local("Noto Sans Mono"),
+         local("NotoSansMono-Regular"); }
+  @font-face{
+    font-display: fallback;
+    font-family: "Noto Sans Fallback";
+    font-weight: 700;
+    font-style: italic;
+    src: local("Noto Sans Bold Italic"),
+         local("NotoSans-BoldItalic"); }
+  @font-face{
+    font-display: fallback;
+    font-family: "Noto Sans Fallback";
+    font-style: normal;
+    font-weight: 700;
+    src:  local("Noto Sans Bold"),
+          local("NotoSans-Bold"); }
+  @font-face{
+    font-display: fallback;
+    font-family: "Noto Sans Fallback";
+    font-style: italic;
+    src: local("Noto Sans Italic"),
+         local("NotoSans-Italic"); }
+  @font-face{
+    font-display: fallback;
+    font-family: "Noto Sans Fallback";
+    font-style: normal;
+    src: local("Noto Sans"),
+         local("NotoSans-Regular"); }
+
+  @font-face{
+    font-display: fallback;
+    font-family: "Noto Serif Fallback";
+    font-weight: 700;
+    font-style: italic;
+    src: local("Noto Serif Bold Italic"),
+         local("NotoSerif-BoldItalic"); }
+  @font-face{
+    font-display: fallback;
+    font-family: "Noto Serif Fallback";
+    font-style: normal;
+    font-weight: 700;
+    src: local("Noto Serif Bold"),
+         local("NotoSerif-Bold"); }
+  @font-face{
+    font-display: fallback;
+    font-family: "Noto Serif Fallback";
+    font-style: italic;
+    src: local("Noto Serif Italic"),
+         local("NotoSerif-Italic"); }
+  @font-face{
+    font-display: fallback;
+    font-family: "Noto Serif Fallback";
+    font-style: normal;
+    src: local("Noto Serif"),
+         local("NotoSerif-Regular"); }
+  @font-face {
+    font-display: fallback;
+    font-family: "STIX Two Math Fallback";
+    font-style: normal;
+    src: local("STIX Two Math"),
+         local("STIXTwoMath-Regular"); }

css/ar5iv.css

@@ -4,13 +4,13 @@
   --main-width: 52rem;
   --main-width-margin: 54rem;
   /* fonts */
-  --headings-font-family: "Noto Sans", sans-serif;
-  --text-font-family: "Noto Serif", serif;
-  --math-font-family: "STIX Two Math", "Cambria Math", math;
+  --headings-font-family: "Noto Sans", "Noto Sans Fallback", sans-serif;
+  --text-font-family: "Noto Serif", "Noto Serif Fallback", serif;
+  --math-font-family: "STIX Two Math", "STIX Two Math Fallback", "Cambria Math", math;
   /* Should we do anything special for caligraphic?
      e.g. "Lucida Calligraphy","Zapf Chancery","URW Chancery L", TeX Gyre Termes...*/
-  --math-caligraphic-font-family: "STIX Two Math", "Cambria Math", math;
-  --code-font-family: "Noto Sans Mono", monospace;
+  --math-caligraphic-font-family: "STIX Two Math", "STIX Two Math Fallback", "Cambria Math", math;
+  --code-font-family: "Noto Sans Mono", "Noto Sans Mono Fallback", monospace;
   /* default color theme is light */
   --background-color: white;
   --text-color: #292929;