From 1861df472ed6c987783bef20a11dfe738767433b Mon Sep 17 00:00:00 2001
From: Adam Porter <adam@alphapapa.net>
Date: Tue, 26 Sep 2023 22:34:54 -0500
Subject: [PATCH] Add: Fallback font for symbols

Fixes #256.
---
 assets/theme-css/vars.css | 2 +-
 config.yaml               | 1 +
 layouts/partials/css.html | 8 ++++++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/assets/theme-css/vars.css b/assets/theme-css/vars.css
index c23c4c32..e9e46832 100644
--- 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
index e40e8c51..094561e2 100644
--- 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
index 5bc6bf62..55f67adf 100644
--- 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 -->