Alternative fonts for headers #7834
Replies: 1 comment 4 replies
-
|
@LandonTClipp If you're already using a |
Beta Was this translation helpful? Give feedback.
-
|
Good to know! I'll have to try this. |
Beta Was this translation helpful? Give feedback.
-
It's a good alternative and one line of code :) you basically click on get embed code on google and select @import |
Beta Was this translation helpful? Give feedback.
-
|
While this is a "good enough" alternative I feel like the approach with the template modification is superior overall. |
Beta Was this translation helpful? Give feedback.
-
Yes true, that's why i said in the case of loading it within css there's a need to change the font-family within css, the way he did it is pretty smart. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
I wanted to share how I added support in the theme configuration to specify an alternative font for header sections. mkdocs-material currently does not support this and I couldn't find any other discussions on how to do this, so I'm writing this show-and-tell so all future generations can learn! 😄
This follows the configuration pattern already established here.
Overridding
main.htmlPlace a file at
overrides/main.htmland add the following content:{% extends "base.html" %} {% block fonts %} {% if config.theme.font != false %} {% set text = config.theme.font.get("text", "Roboto") %} {% set code = config.theme.font.get("code", "Roboto Mono") %} {% set header = config.theme.font.get("header", text ) %} <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family={{ text | replace(' ', '+') + ':300,300i,400,400i,700,700i%7C' + code | replace(' ', '+') + ':400,400i,700,700i%7C' + header | replace(' ', '+') + ':300,300i,400,400i,700,700i' }}&display=fallback"> <style> :root{ --md-text-font:"{{ text }}"; --md-code-font:"{{ code }}"; --md-header-font:"{{ header }}"; } </style> {% endif %} {% endblock %}This is essentially the same as the theme defaults, but it adds the
--md-header-fontvariable and modifies the stylesheet URL to grab whatever theheaderjinja variable is set to.Create additional CSS
Now that the variable has been added to the root CSS section, you can add more CSS selectors to propagate the font family you've defined. Here is my
extra.css:The theme uses these
--md-{text,code}-font-familyCSS variables to set defaults if the--md-{text,code}-fontfonts are not available in the deployed site, so we do the same in thebodyselector for the header variable. We then modify theh2,h3,h4,h5,h6styles to select thefont-familyfrom the--md-header-font-familyvariable that was defined.I also added some additional coloring to the headers, but this is optional.
Apply the configuration in
mkdocs.ymlAnd voila, we can specify the header font in the theme configuration:
You can see the result in my site here:
Beta Was this translation helpful? Give feedback.
All reactions