How to add font select box to let user to select font

support
2

Much of your question is off-topic (CSS, JS) and would be better addressed somewhere like Stack Overflow. Having said that…

assets/scss/main.scss 
:root {
  --sta-font-body: {{ .Site.Params.pezfont }};
  --sta-font-heading: {{ .Site.Params.pezfont }};
  --sta-font-nav: {{ .Site.Params.pezfont }};
  --sta-font-mono: {{ .Site.Params.pezfont }};
}

body {
  font-family: var(--sta-font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sta-font-heading);
}

layouts/_default/baseof.html 
<head>
  ...
  {{ $css := resources.Get "scss/main.scss" | resources.ExecuteAsTemplate "style.css" . | toCSS }}
  <link rel="stylesheet" href="{{ $css.RelPermalink }}">
  <script>
    function changeFont(font) {
      document.documentElement.style.setProperty('--sta-font-body', font);
      document.documentElement.style.setProperty('--sta-font-heading', font);
      document.documentElement.style.setProperty('--sta-font-nav', font);
      document.documentElement.style.setProperty('--sta-font-mono', font);
    }
  </script>
  ...
</head>
<body>
  ...
  <select id="font" onchange="changeFont(this.value)">
    {{ range (sort site.Params.fonts) }}
      {{ $selected := cond (eq site.Params.pezfont .) "selected" "" | safeHTMLAttr }}
      <option value="{{ . }}" {{ $selected }}>{{ . }}</option>
    {{ end }}
  </select>
  ...
</body>

4 Likes