change font of modules (local fonts)

foryas

hi guys,how i can change fonts of modules using custom.css and use local font?

broberg

try adding add this to custom.css and your font to the fonts folder

@font-face {
  font-family: YourFont;
  font-style: normal;
  font-weight: 100;
  src:
    local("YourFont"),
    url("fonts/Yourfont.ttf") format("truetype");
}

foryas

@broberg if i want to only change font of special module not all?

@foryas you can also do. But you need to understand css. Study it.

broberg

@foryas

.calendar {
Font-family : YourFont;
}

That would change the font for the module calendar

foryas

@broberg said in change font of modules (local fonts):

.calendar

how i can find class (.calendar for your example) of any module to use that?

broberg

@foryas open the developer options in electron or check with F12 in your local browser to see the code.

But the main module class name are always the name of the module as put in the config file

.calendar for calendar
.alarm for alarm
.MMM-Instagram for MMM-Instagram

etc etc

foryas

@broberg so thanks my friend solved.

bekirs

hi all,

I tried to change my newsfeed font and i added below commands to custom.css but it didnt work. What should i do ?

Thanks

.newsfeed {
  font-family: Verdana;
  font-style: normal;
  font-weight: 100;
  src:
    local("Verdana"),
    url("/home/pi/MagicMirror/fonts/Verdana.ttf") format("truetype");
}

ninjabreadman

@bekirs @font-face is not a style rule, but declaration (“at-rule”). Here’s an explanation of how it works.

So your code should instead be:

@font-face {
  font-family: Verdana;
  font-style: normal;
  font-weight: 100;
  src:
    local("Verdana"),
    url("/home/pi/MagicMirror/fonts/Verdana.ttf") format("truetype");
}

.newsfeed {
  font-family: Verdana;
}

This avoids using the local version of the Verdana font. Why not use the local Verdana font (or install your desired alternative) and use the below instead?

.newsfeed {
  font-family: Verdana;
}

SOLVED change font of modules (local fonts)