and update extra.css to override the font-family in the header and tabs.
\n/* Header */\n.md-header {\n font-family: \"Playfair\";\n}\n\n.md-tabs {\n font-family: \"PlayFair\";\n}\nThat worked as expected. But now I want to use another font and I'm having a tough time with the instructions on how to do so.
\nI added the following font face with the following code in extra.css (I retrieved the url from the google fonts site):
\n@font-face {\n font-family: \"Lancelot\";\n src: url(\"https://fonts.googleapis.com/css2?family=Lancelot&display=swap\");\n}\n\nand then attempted to use it in the same file:
\n.bookfancy {\n text-align: center;\n font-size: 1.5rem;\n font-family: \"Lancelot\";\n}\nI do not see the font being used in the generated site and I do see the following errors from the developer console:
\nbook/:1 Failed to decode downloaded font: https://fonts.googleapis.com/css2?family=Lancelot&display=swap\n\nOTS parsing error: invalid sfntVersion: 791289964\nHoping there is something obvious I am missing. I do see other discussion on how to make deeper modifications to enable this here:
\n\nBut I am hoping for something simpler
","upvoteCount":1,"answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Hi @Aazih,
\nthis is incorrect:
src: url(\"https://fonts.googleapis.com/css2?family=Lancelot&display=swap\");as the URL leads to a text file with CSS font rules, not to a font, so download the text file and include it in your CSS.
\nYou could also use @import, but this increases the amount of requests, so I would keep it local in your extra.css
Also another possible nitpick I would have is you should not use font-family unless you're 100% sure that's what you want.
\nInstead, redefine the font variable as described in the docs, you can scope it to the :.md-header etc. selectors, doesn't have to be :root
\nRead the comment below for a fixed statement
--md-text-font: \"<font>\"; Ref:
\n- \n
- https://developer.mozilla.org/en-US/docs/Web/CSS/@import \n
- https://squidfunk.github.io/mkdocs-material/setup/changing-the-fonts/#customization \n
Side note, in the past, at Nype, I did have to deal with some issues concerning \"invisible text during load\", and the issue there was a lack of defined swap mode for the custom font, but I guess the fonts from Google do come with it like the example above, but worth keeping a lookout for this issue 😉 :
Unable to successfully use a third font #8276
-
|
Hey all, I'm using material for mkdocs on my author site and I've used up the two out of the box fonts that can be configured in mkdocs.yml: and update extra.css to override the font-family in the header and tabs. That worked as expected. But now I want to use another font and I'm having a tough time with the instructions on how to do so. I added the following font face with the following code in extra.css (I retrieved the url from the google fonts site): and then attempted to use it in the same file: I do not see the font being used in the generated site and I do see the following errors from the developer console: Hoping there is something obvious I am missing. I do see other discussion on how to make deeper modifications to enable this here: But I am hoping for something simpler |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 6 replies
-
|
Hi @Aazih, src: url("https://fonts.googleapis.com/css2?family=Lancelot&display=swap");as the URL leads to a text file with CSS font rules, not to a font, so download the text file and include it in your CSS.
--md-text-font: "<font>"; Ref:
Side note, in the past, at Nype, I did have to deal with some issues concerning "invisible text during load", and the issue there was a lack of defined |
Beta Was this translation helpful? Give feedback.
-
|
This url: /* latin-ext */
@font-face {
font-family: 'Lancelot';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/lancelot/v27/J7acnppxBGtQEulG4KYxzp5yGw.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Lancelot';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/lancelot/v27/J7acnppxBGtQEulG4KY_zp4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}add it to the extra.css and it should work, you don't have to download the files to include them in your site files. I'm not sure whether or not the privacy plugin handles such cases automatically, but you could investigate. Another option is to handle this process using a custom hook programmed in Python, The links above show You could also have a look at the fonts example: |
Beta Was this translation helpful? Give feedback.
-
|
Thanks so much @kamilkrzyskow taking the font-face from the Google css into extra.css worked as expected and now I'm using the font successfully. I've marked the question as answered! I did test using --md-text-font and unfortunately the recommended format of: Did not work while using font-family does: I don't know if it's worth discussing further here why the recommended code might not be working. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for letting me know. I had to fix a misconception that I had. The variables from mkdocs-material are defined as follows in order: /* Inline CSS from the templates mkdocs.yml */
/* In your case it would be Libre Franklin and Playfair */
:root {
--md-text-font: "Roboto";
--md-code-font: "Roboto Mono";
}
/* main.css file from the theme defines the True variable with all of the safety fallbacks on the body tag */
body {
--md-text-font-family: var(--md-text-font,_),-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
--md-code-font-family: var(--md-code-font,_),SFMono-Regular,Consolas,Menlo,monospace;
font-family:var(--md-text-font-family);
}In general the CSS rules are reevaluated for each DOM element, CSS is additive, so I thought that changing the So you're correct, it's required to re-set the .bookfancy {
--md-text-font: "Lancelot";
font-family: var(--md-text-font), var(--md-text-font-family);
}.bookfancy {
font-family: "Lancelot", var(--md-text-font-family);
} |
Beta Was this translation helpful? Give feedback.
-
|
Thanks so much, do you think this warrants an update to the use custom font documentation? |
Beta Was this translation helpful? Give feedback.
-
|
You could send in a PR if you want, either to the docs here or to the examples repository itself, with a fix for display: swap as well 🫡 |
Beta Was this translation helpful? Give feedback.
Hi @Aazih,
this is incorrect:
as the URL leads to a text file with CSS font rules, not to a font, so download the text file and include it in your CSS.
You could also use
@import, but this increases the amount of requests, so I would keep it local in yourextra.cssAlso another possible nitpick I would have is you should not usefont-familyunless you're 100% sure that's what you want.Instead, redefine the font variable as described in the docs, you can scope it to the:.md-headeretc. selectors, doesn't have to be:rootRead the comment below for a fixed statement
Ref: