Read the statement by Michael Teeuw here.
Change MM fonts
-
Hello everybody,
I started my MM few days ago and I would like to change the font of it, I don’t quite like the actual one (its name is Roboto I believe). So I got an .ots file of a new font I like more (2 actually) and I’m trying to use it as the font for every modules. Problem is, I have never done that and I have no idea of how works a CSS file at all, so I would like to know how to do that (is it even possible?)
Thanks,
Axel -
@aaaxel so, you want to add an entry to css/custom.css that changes the font name
which is done in the body statement in main.css (don’t edit main.css)if custom.css doesn’t exist, create it like this
cd ~/MagicMirror touch css/coustom.css
then u can edit it (custom/css) and add
body { font-family: "Roboto Condensed", sans-serif; }
with your new font family instead
-
@sdetweil Is that all? nothing changes :grinning_face_with_sweat: I may have to do something obvious for you that I don’t know as a beginner
-
@aaaxel i’m not sure what you said…
fonts go in the fonts folder, yes?
-
@aaaxel search in Google fonts what you like then add in custom.css line like this with wanted font
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap&subset=latin-ext");
in the body declare your imported font
body { font-family: "Roboto Condensed", sans-serif; }
-
@hango Cool! It half-worked: Most of the fonts have changed, but there is still some text in roboto, especially in the default news module…
-
@aaaxel add in custom.css
.newsfeed { font-family: "YOUR FONT"; }
-
@hango ok I got it, I should be able to update every module this way, thanks!
-
@aaaxel or make like in the last update custom.css style
:root { --font-size: 1em; --font-primary: "YOUR FONT", sans-serif; --font-secondary: "YOUR FONT variant", sans-serif; }
then
body { font-family: var(--font-primary); font-size: var(--font-size); }
-
@hango I just tried your 2 solutions but newsfeed still don’t change…
This is what I have in custom.css:
@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@200;400;600;800&display=swap'); body { font-family: "Spartan", sans-serif; font-weight: 800; } .newsfeed { font-family: "Spartan", sans-serif; font-weight: 600; }
I also tried this way:
@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@200;400;600;800&display=swap'); body { font-family: "Spartan", sans-serif; font-weight: 800; .newsfeed { font-family: "Spartan", sans-serif; font-weight: 600; } }