Read the statement by Michael Teeuw here.
Change MM fonts
-
@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; } }
-
@aaaxel said in Change MM fonts:
@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; }
this is correct, also try
.newsfeed, .newsfeed-source, .newsfeed-title, .newsfeed-desc { font-family: "Spartan", sans-serif !important; font-weight: 600; }