feat: add custom css properties to change fonts (#890)

Author: xoxys

exampleSite/content/en/features/theming/_index.md

@@ -58,4 +58,33 @@ If you want to add more Favicon formats you have to [overwrite](https://gohugo.i
 <meta name="theme-color" content="#efefef">
 ```
 
+## Fonts
+
+To use a custom font, it needs to be specified first. While there are many ways to do this, we recommend to use `@font-face` as it supports local as well as remote fonts. If you want to serve the fonts from your own server, you have to place them in the `static/fonts` folder of your project.
+
+The font registration is done in the `custom.css` file. There are also a few custom CSS properties available to simplify the usage of custom fonts.
+
+**Example:**
+
+<!-- prettier-ignore -->
+```css
+@font-face {
+  font-family: "DancingScript";
+  src:
+    url("fonts/DancingScript.woff2") format("woff2"),
+    url("fonts/DancingScript.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  --code-max-height: 60rem;
+
+  --header-font-family: "DancingScript";
+  --body-font-family: "DancingScript";
+  --code-font-family: "DancingScript";
+}
+```
+
 Happy customizing!

exampleSite/static/custom.css.example

@@ -2,6 +2,10 @@
 
 :root {
   --code-max-height: 60rem;
+
+  --header-font-family: "DancingScript";
+  --body-font-family: "DancingScript";
+  --code-font-family: "DancingScript";
 }
 
 /* Light mode theming */
@@ -152,3 +156,13 @@
     --footer-link-color-visited: #ffcc5c;
   }
 }
+
+@font-face {
+  font-family: "DancingScript";
+  src:
+    url("fonts/DancingScript.woff2") format("woff2"),
+    url("fonts/DancingScript.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}

src/sass/_base.scss

@@ -1,7 +1,13 @@
-:root,
-:root[color-theme="light"] {
+:root {
   --code-max-height: none;
 
+  --header-font-family: #{meta.inspect($header-font-family)};
+  --body-font-family: #{meta.inspect($body-font-family)};
+  --code-font-family: #{meta.inspect($code-font-family)};
+}
+
+:root,
+:root[color-theme="light"] {
   @include color_theme_light;
   @include code_theme_light;
 }

src/sass/_defaults.scss

@@ -46,10 +46,12 @@ $link-color-visited: rgba(119, 73, 191, 1) !default;
 $link-color-footer: rgba(246, 107, 14, 1) !default;
 
 $body-background: white !default;
+$body-font-family: "Liberation Sans", sans-serif !default;
 $body-font-color: $gray-800 !default;
 $body-font-weight: normal !default;
 $body-min-width: 20rem !default;
 
+$code-font-family: "Liberation Mono", monospace !default;
 $code-font-color: rgba(70, 70, 70, 1) !default;
 $code-font-color-dark: rgba(185, 185, 185, 1) !default;
 
@@ -68,6 +70,7 @@ $link-color-visited-dark: rgba(186, 142, 240) !default;
 $code-background: $gray-100 !default;
 $code-background-dark: darken($body-background-dark, 3) !default;
 
+$header-font-family: "Metropolis", sans-serif !default;
 $header-height: 3.5rem !default;
 $menu-width: 18rem !default;
 

src/sass/_fonts.scss

@@ -1,6 +1,7 @@
 @font-face {
   font-family: "Liberation Sans";
-  src: url("fonts/LiberationSans-Bold.woff2") format("woff2"),
+  src:
+    url("fonts/LiberationSans-Bold.woff2") format("woff2"),
     url("fonts/LiberationSans-Bold.woff") format("woff");
   font-weight: bold;
   font-style: normal;
@@ -9,7 +10,8 @@
 
 @font-face {
   font-family: "Liberation Sans";
-  src: url("fonts/LiberationSans-BoldItalic.woff2") format("woff2"),
+  src:
+    url("fonts/LiberationSans-BoldItalic.woff2") format("woff2"),
     url("fonts/LiberationSans-BoldItalic.woff") format("woff");
   font-weight: bold;
   font-style: italic;
@@ -18,7 +20,8 @@
 
 @font-face {
   font-family: "Liberation Sans";
-  src: url("fonts/LiberationSans-Italic.woff2") format("woff2"),
+  src:
+    url("fonts/LiberationSans-Italic.woff2") format("woff2"),
     url("fonts/LiberationSans-Italic.woff") format("woff");
   font-weight: normal;
   font-style: italic;
@@ -27,7 +30,8 @@
 
 @font-face {
   font-family: "Liberation Sans";
-  src: url("fonts/LiberationSans.woff2") format("woff2"),
+  src:
+    url("fonts/LiberationSans.woff2") format("woff2"),
     url("fonts/LiberationSans.woff") format("woff");
   font-weight: normal;
   font-style: normal;
@@ -36,7 +40,8 @@
 
 @font-face {
   font-family: "Liberation Mono";
-  src: url("fonts/LiberationMono.woff2") format("woff2"),
+  src:
+    url("fonts/LiberationMono.woff2") format("woff2"),
     url("fonts/LiberationMono.woff") format("woff");
   font-weight: normal;
   font-style: normal;
@@ -45,30 +50,33 @@
 
 @font-face {
   font-family: "Metropolis";
-  src: url("fonts/Metropolis.woff2") format("woff2"), url("fonts/Metropolis.woff") format("woff");
+  src:
+    url("fonts/Metropolis.woff2") format("woff2"),
+    url("fonts/Metropolis.woff") format("woff");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: "GeekdocIcons";
-  src: url("fonts/GeekdocIcons.woff2") format("woff2"),
+  src:
+    url("fonts/GeekdocIcons.woff2") format("woff2"),
     url("fonts/GeekdocIcons.woff") format("woff");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
 }
 
 body {
-  font-family: "Liberation Sans", sans-serif;
+  font-family: var(--body-font-family);
 }
 
 code,
 .gdoc-error__title {
-  font-family: "Liberation Mono", monospace;
+  font-family: var(--code-font-family);
 }
 
 .gdoc-header {
-  font-family: "Metropolis", sans-serif;
+  font-family: var(--header-font-family);
 }

src/sass/_shortcodes.scss

@@ -196,7 +196,7 @@
 
 // {{< mermaid >}}
 .gdoc-mermaid {
-  font-family: "Liberation Sans", sans-serif;
+  font-family: var(--body-font-family);
 
   // Fix height of mermaid SVG elements (see https://github.com/mermaid-js/mermaid/issues/2481)
   > svg {
@@ -211,7 +211,7 @@
   &__default {
     padding: 0;
     margin: 0;
-    font-family: "Liberation Mono", monospace;
+    font-family: var(--code-font-family);
   }
 
   &__meta {

src/sass/main.scss

@@ -1,4 +1,5 @@
 @use "sass:map";
+@use "sass:meta";
 
 @import "_defaults";
 @import "_color_mode";