diff --git a/config/design-tokens/fonts.json b/config/design-tokens/fonts.json index 87a129a..14ffe63 100644 --- a/config/design-tokens/fonts.json +++ b/config/design-tokens/fonts.json @@ -40,5 +40,21 @@ "weight": 650 } } + }, + "monospace": { + "family": "IBM Plex Mono", + "format": "truetype", + "weights": { + "Regular": { + "path": "/ibmplexmono/IBMPlexMono-Regular.ttf", + "font-style": "normal", + "weight": 400 + }, + "Italic": { + "path": "/ibmplexmono/IBMPlexMono-Italic.ttf", + "font-style": "italic", + "weight": 400 + } + } } } diff --git a/src/assets/fonts/ibmplexmono/IBMPlexMono-Italic.ttf b/src/assets/fonts/ibmplexmono/IBMPlexMono-Italic.ttf new file mode 100644 index 0000000..3cb28a3 Binary files /dev/null and b/src/assets/fonts/ibmplexmono/IBMPlexMono-Italic.ttf differ diff --git a/src/assets/fonts/ibmplexmono/IBMPlexMono-Regular.ttf b/src/assets/fonts/ibmplexmono/IBMPlexMono-Regular.ttf new file mode 100644 index 0000000..81ca3dc Binary files /dev/null and b/src/assets/fonts/ibmplexmono/IBMPlexMono-Regular.ttf differ diff --git a/src/colophon.md b/src/colophon.md index 75d4a78..f2bed8b 100644 --- a/src/colophon.md +++ b/src/colophon.md @@ -35,7 +35,7 @@ Code formatting is applied by [Prism][prismjs] and uses a tweaked version of the ## Design -Headings are using the [Anek Latin][aneklatin] font, and the body font is [iA Writer Quattro][iawriterquattro]. +Headings are using the [Anek Latin][aneklatin] font, and the body font is [iA Writer Quattro][iawriterquattro]. Monospace font is [IBM Plex Mono][ibmplexmono]. The colour palette is viewable on the [styleguide][styleguide] page. @@ -90,3 +90,4 @@ I've done my best to show where I found any code I did not write myself. [everylayout]: https://every-layout.dev [prismjs]: https://prismjs.com [tokyonight]: https://github.com/folke/tokyonight.nvim +[ibmplexmono]: https://fonts.google.com/specimen/IBM+Plex+Mono diff --git a/src/css/global/global-styles.css b/src/css/global/global-styles.css index fe595a8..aee0fbb 100644 --- a/src/css/global/global-styles.css +++ b/src/css/global/global-styles.css @@ -123,9 +123,13 @@ hr { color: var(--color-surface); } +code { + font-family: var(--font-family-monospace); +} + :not(pre) > code { background-color: var(--color-surface); - border-radius: var(--spacing-\0.5); + border-radius: var(--spacing-0\.25); padding-block: 0.15em; padding-inline: 0.25em; }