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 :grinning_face_with_sweat: 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?

A Former User

This post is deleted!

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…

A Former User

This post is deleted!

Aaaxel

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

A Former User

This post is deleted!

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

}