From 20b8f6003bc7651fe8d942f620370c14a55abe2b Mon Sep 17 00:00:00 2001 From: Robert Kaussow Date: Sun, 6 Oct 2024 20:59:44 +0200 Subject: [PATCH] feat: add custom css properties to change fonts --- .../content/posts/features/theming/index.md | 29 ++++++++++++++++++- exampleSite/static/custom.css.example | 16 ++++++++++ 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, 76 insertions(+), 15 deletions(-) diff --git a/exampleSite/content/posts/features/theming/index.md b/exampleSite/content/posts/features/theming/index.md index cb66734..eca171f 100644 --- a/exampleSite/content/posts/features/theming/index.md +++ b/exampleSite/content/posts/features/theming/index.md @@ -64,4 +64,31 @@ If you want to add more Favicon formats you have to [overwrite](https://gohugo.i ``` -Happy customizing! +## 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"; +} +``` diff --git a/exampleSite/static/custom.css.example b/exampleSite/static/custom.css.example index a7eabcf..7c59a4d 100644 --- a/exampleSite/static/custom.css.example +++ b/exampleSite/static/custom.css.example @@ -2,6 +2,11 @@ :root { --code-max-height: 60rem; + + + --header-font-family: "DancingScript"; + --body-font-family: "DancingScript"; + --code-font-family: "DancingScript"; } /* Light mode theming */ @@ -156,3 +161,14 @@ --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 96175ad..c79dafc 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 1e7dcaf..a0f6d1d 100644 --- a/src/sass/_defaults.scss +++ b/src/sass/_defaults.scss @@ -45,10 +45,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(95, 95, 95, 1) !default; $code-font-color-dark: rgba(185, 185, 185, 1) !default; @@ -67,6 +69,7 @@ $link-color-visited-dark: rgba(186, 142, 240) !default; $code-background: lighten($gray-200, 4) !default; $code-background-dark: darken($body-background-dark, 3) !default; +$header-font-family: "Metropolis", sans-serif !default; $header-height: 3.5rem !default; $menu-width: 16rem !default; diff --git a/src/sass/_fonts.scss b/src/sass/_fonts.scss index fee23a0..f13fd9f 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: "GeekblogIcons"; - src: url("fonts/GeekblogIcons.woff2") format("woff2"), + src: + url("fonts/GeekblogIcons.woff2") format("woff2"), url("fonts/GeekblogIcons.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, .gblog-error__title { - font-family: "Liberation Mono", monospace; + font-family: var(--code-font-family); } .gblog-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 cb0df37..41a898c 100644 --- a/src/sass/_shortcodes.scss +++ b/src/sass/_shortcodes.scss @@ -243,7 +243,7 @@ // {{< mermaid >}} .gblog-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 { @@ -258,7 +258,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";