Change MM fonts

Aaaxel

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

sdetweil

@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

Aaaxel

@sdetweil Is that all? nothing changes I may have to do something obvious for you that I don’t know as a beginner

sdetweil

@aaaxel i’m not sure what you said…

fonts go in the fonts folder, yes?

hango

@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;
}

Aaaxel

@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…

hango

@aaaxel add in custom.css

.newsfeed  {
	font-family: "YOUR FONT";
}

Aaaxel

@hango ok I got it, I should be able to update every module this way, thanks!

hango

@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);
}

Aaaxel

@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;
}

}