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 @@
+
+
+{{- $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 -}}
+
+