Refactor font loading (#597)

* Refactor font loading

We now only provide a mechanism for *loading* fonts from Google.
To *set* a font, the user needs to provide custom CSS.
The documentation gives an example.

* Fix Hero font

---------

Co-authored-by: Jarrod Millman <jarrod.millman@gmail.com>

Author: stefanv

assets/theme-css/hero.css

@@ -31,7 +31,7 @@
   align-items: center;
   display: flex;
   flex-direction: row;
-  font-family: var(--fontFamily), sans-serif;
+  font-family: var(--pst-font-family-heading), sans-serif;
   font-weight: 900;
   font-size: 6em;
   color: var(--pst-color-text-base);

assets/theme-css/vars.css

@@ -1,7 +1,5 @@
 /* prettier-ignore */
 :root {
-  --fontFamily: "{{ .Site.Params.font.name }}", "Noto Sans Symbols 2";
-
   --spht-color-dark: rgb(1, 50, 67);
   --spht-color-light: rgb(255, 255, 255);
   --spht-color-link-hover: rgb(77, 171, 207);

config.yaml

@@ -7,9 +7,6 @@ params:
   images:
     - /images/logo.svg
   navColor: blue
-  font:
-    name: "Lato"
-    sizes: [400, 900]
   plausible:
     dataDomain: null
     javaScript: "https://views.scientific-python.org/js/script.js"

doc/assets/css/custom.css

@@ -1,3 +1,4 @@
+.hero-title,
 .navbar-logo-text {
   font-family: "Lato";
 }

doc/config.yaml

@@ -25,6 +25,9 @@ params:
     image: logo.svg
     text: Scientific Python Hugo Theme
     link: /
+  fonts:
+    - name: "Lato"
+      weights: [400, 900]
   hero:
     title: Scientific Python Theme
     image: logo.svg

doc/content/user_guide/styling.md

@@ -12,6 +12,43 @@ Custom styles should be added to `/assets/css/my_css.css` (where
 
 ## CSS theme variables
 
+## Fonts
+
+To override the fonts used, add a custom CSS file and set the following variables:
+
+```css
+// General text
+:root {
+  --pst-font-family-base: "Open Sans";
+  --pst-font-family-heading: "Open Sans";
+  --pst-font-family-monospace: "Open Sans";
+}
+
+// Navigation bar
+.navbar-logo-text {
+  font-family: "Open Sans";
+}
+```
+
+After setting the font, we still need to ensure that it is loaded.
+If you are happy loading your fonts from Google Fonts, add them to your `config.yaml`:
+
+```yaml
+params:
+  fonts:
+    - name: "Lato"
+      weights: [400, 900]
+```
+
+Alternatively, create `layouts/partials/head.html` and add what you need to load the font, e.g.:
+
+```html
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Lato:wght@400;900"
+/>
+```
+
 ### Color variables
 
 We mostly rely on PyData Sphinx Theme's

layouts/_default/baseof.html

@@ -8,6 +8,9 @@
     <!-- Render theme css -->
     {{ partial "css.html" . -}}
 
+    <!-- Add MathJax, if needed -->
+    {{ partial "mathjax.html" }}
+
     <!-- Render custom header -->
     {{ partial "head.html" . -}}
 

layouts/partials/css.html

@@ -7,16 +7,19 @@
 {{- $cssOpts := collections.Merge $sassCompiler $serverOpts -}}
 
 <!-- Fonts -->
-{{- $fontName := .Site.Params.font.name | default "Open Sans" -}}
-{{- $fontFace := replace $fontName " " "+" -}}
-{{- $fontSizes := delimit (.Site.Params.font.sizes | default (slice 300 400 600 700)) ";" -}}
-{{- $fontUrl := printf "https://fonts.googleapis.com/css2?family=%s:wght@%s" $fontFace $fontSizes -}}
-
-<link rel="icon" href="{{ "images/favicon.ico" | relURL }}" />
-
+{{ with $fonts := .Site.Params.fonts -}}
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+{{ range $fonts }}
+{{- $fontFace := replace .name " " "+" -}}
+{{- $fontSizes := delimit (.weights | default (slice 300 400 600 700)) ";" -}}
+{{- $fontUrl := printf "https://fonts.googleapis.com/css2?family=%s:wght@%s" $fontFace $fontSizes -}}
 <link rel="stylesheet" href="{{ $fontUrl }}">
+{{- end }}
+{{- end }}
+
+<link rel="icon" href="{{ "images/favicon.ico" | relURL }}" />
 
 <!-- Fallback font for symbols (such as "🛈"). --
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2">

layouts/partials/head.html

@@ -1,14 +0,0 @@
-{{ if (findRE `(\$.*\$)|(\\\\\[.*\\\\\])|(\\\\\(.*\\\\\))` .Content) }}
-    <script>
-      MathJax = {
-        tex: {
-          displayMath: [['$$', '$$'], ['\\[', '\\]']],
-          inlineMath: [['$', '$'], ['\\(', '\\)']],
-        }
-      };
-    </script>
-    <script type="text/javascript" id="MathJax-script" async
-      src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
-    </script>
-{{ end }}
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Sans">

layouts/partials/mathjax.html

@@ -0,0 +1,12 @@
+{{ if (findRE `(\$.*\$)|(\\\\\[.*\\\\\])|(\\\\\(.*\\\\\))` .Content) }}
+<script>
+    MathJax = {
+        tex: {
+            displayMath: [['$$', '$$'], ['\\[', '\\]']],
+            inlineMath: [['$', '$'], ['\\(', '\\)']],
+        }
+    };
+</script>
+<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
+</script>
+{{ end }}