Fonts¶
Theme comes with font stack similar to the one on Minecraft Wiki. Namely, font “Liberation Sans” is used for text, “IBM Plex Sans” is used for headings and “JetBrains Mono” is used for code.
Those fonts are packaged together with the theme, so your documentation can be deployed anywhere, even if there’s no connection to Google Fonts.
Changing fonts¶
If our font selection doesn’t match your taste or branding, you can replace the font stack.
You can override template webfonts.html, from
where fonts are included and set. The default
template looks like this:
1<style>
2 @import "{{ pathto('_static/mcl/fonts/LiberationSans.css', 1)|e }}";
3 @import "{{ pathto('_static/mcl/fonts/JetBrainsMono.css', 1)|e }}";
4 @import "{{ pathto('_static/mcl/fonts/IBMPlexSerif.css', 1)|e }}";
5
6 :root {
7 --mcl-font-size: 16px;
8 --mcl-text-font: "Liberation Sans", sans-serif;
9 --mcl-heading-font: "IBM Plex Serif", serif;
10 --mcl-monospace-font: "JetBrains Mono", monospace;
11 }
12</style>
You can override it and insert whatever fonts you
want. Just don’t forget to put them in _static
and @import them.
Alternatively, you can use a Web Font provider like Google Fonts, which can give you the CSS link to font-face definitions. Then you can just set the variables:
1<style>
2 @import "{{ pathto('_static/mcl/fonts/LiberationSans.css', 1)|e }}";
3 @import "{{ pathto('_static/mcl/fonts/JetBrainsMono.css', 1)|e }}";
4 @import "{{ pathto('_static/mcl/fonts/IBMPlexSerif.css', 1)|e }}";
5
6 :root {
7 --mcl-font-size: 16px;
8 --mcl-text-font: "Liberation Sans", sans-serif;
9 --mcl-heading-font: "IBM Plex Serif", serif;
10 --mcl-monospace-font: "JetBrains Mono", monospace;
11 }
12</style>
See also
There are more typography-related variables available in CSS Variables chapter of documentation. Be sure to check them out too for more customization options!