Add: Fallback font for symbols

Fixes scientific-python#256.
alphapapa · Sep 27, 2023 · 1861df4 · 1861df4
1 parent 6bddff1
commit 1861df4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/assets/theme-css/vars.css b/assets/theme-css/vars.css
@@ -1,6 +1,6 @@
 /* prettier-ignore */
 :root {
-  --fontFamily: {{ .Site.Params.font.name }};
+  --fontFamily: "{{ .Site.Params.font.name }}", "{{ .Site.Params.font.fallbackName }}";
 
   --colorPrimaryDark: rgb(1, 50, 67);
   --colorPrimary: rgb(77, 119, 207);

diff --git a/config.yaml b/config.yaml
@@ -5,6 +5,7 @@ params:
   navColor: blue
   font:
     name: "Lato"
+    fallbackName: "Noto Sans Symbols 2"
     sizes: [400, 900]
   plausible:
     dataDomain: null

diff --git a/layouts/partials/css.html b/layouts/partials/css.html
@@ -13,6 +13,14 @@
 
 <link rel="icon" href="{{ "images/favicon.ico" | relURL }}" />
 <link rel="stylesheet" href="{{ $fontUrl }}">
+
+<!-- Fallback font for symbols (such as "🛈"). -->
+{{- $fallbackFontName     := .Site.Params.font.fallbackName | default "Noto Sans Symbols 2" -}}
+{{- $fallbackFontFace     := replace $fallbackFontName " " "+" -}}
+{{- $fallbackFontSizes    := delimit (.Site.Params.font.sizes | default (slice 300 400 600 700)) "," -}}
+{{- $fallbackFontUrl      := printf "https://fonts.googleapis.com/css?family=%s:%s" $fallbackFontFace $fallbackFontSizes -}}
+<link rel="stylesheet" href="{{ $fallbackFontUrl }}">
+
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
 
 <!-- SASS --- currently only for fresh -->