From d587968b58fb26d0c4eb5682183ae402bf5bd57e Mon Sep 17 00:00:00 2001 From: Robert Kaussow Date: Sun, 6 Oct 2024 14:36:18 +0200 Subject: [PATCH] feat: add custom css properties to change fonts (#890) --- .../content/en/features/theming/_index.md | 29 +++++++++++++++++++ exampleSite/static/custom.css.example | 14 +++++++++ src/sass/_base.scss | 10 +++++-- src/sass/_defaults.scss | 3 ++ src/sass/_fonts.scss | 28 +++++++++++------- src/sass/_shortcodes.scss | 4 +-- src/sass/main.scss | 1 + 7 files changed, 75 insertions(+), 14 deletions(-) diff --git a/exampleSite/content/en/features/theming/_index.md b/exampleSite/content/en/features/theming/_index.md index d443316..885b441 100644 --- a/exampleSite/content/en/features/theming/_index.md +++ b/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 ``` +## 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:** + + +```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! diff --git a/exampleSite/static/custom.css.example b/exampleSite/static/custom.css.example index 93e21cd..aad406a 100644 --- a/exampleSite/static/custom.css.example +++ b/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; +} diff --git a/src/sass/_base.scss b/src/sass/_base.scss index 66b0e33..e610633 100644 --- a/src/sass/_base.scss +++ b/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; } diff --git a/src/sass/_defaults.scss b/src/sass/_defaults.scss index 6aa19c7..27a6456 100644 --- a/src/sass/_defaults.scss +++ b/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; diff --git a/src/sass/_fonts.scss b/src/sass/_fonts.scss index f202b13..5cfc51b 100644 --- a/src/sass/_fonts.scss +++ b/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,7 +50,9 @@ @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; @@ -53,7 +60,8 @@ @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; @@ -61,14 +69,14 @@ } 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); } diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss index 4485bad..46243a2 100644 --- a/src/sass/_shortcodes.scss +++ b/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 { diff --git a/src/sass/main.scss b/src/sass/main.scss index ea5a95d..9259c2c 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -1,4 +1,5 @@ @use "sass:map"; +@use "sass:meta"; @import "_defaults"; @import "_color_mode";