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?

[A Former User]

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

[bekirs]

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

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

I wrote below but it didnt work

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

[ninjabreadman]

@bekirs My first question: Is Verdana actually located in ~/MagicMirror/fonts/Verdana.ttf? If so, you might try url("file:///home/pi/MagicMirror/fonts/Verdana.ttf"). When you run npm start dev in Terminal while in ~/MagicMirror, are there any console errors (in Terminal or Electron)?

[bekirs]

verdana is located in true folder. and after i run npm start dev i could not see any error thank you

[ninjabreadman]

@bekirs Did you try using url("file:///home/pi/MagicMirror/fonts/Verdana.ttf")?

[j.e.f.f]

@bekirs You need to use a virtual path to the file, not a physical path. Change your CSS as follows:

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

That said, I’m not sure about TrueType support in Chrome, and subsequently Electron. if this still doesn’t work, you’ll need to convert the font into a supported format, such as woff or woff2. Font Squirrel is an online tool that can do it, but you might run into copy protection issues, as Verdana is a licensed font. Do a Google search for web font generator to find other options, or you can even try searching for a woff version of Verdana.

Of course, the designer in me is screaming that there are so many nicer type faces suitable for UI than Verdana that are available for free. Google Fonts has many options that are readily downloadable, and subsequently can be converted to web font formats using Font Squirrel.

Good luck!

[epi]

So, I’ve downloaded https://www.fontsquirrel.com/fonts/comic-relief and added a font to

/home/pi/MagicMirror/fonts

And my custom css looks like this

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

Despite that, font is not seen. What could be the reason?

[j.e.f.f]

@epi don’t wrap the@font-face css rule within the body CSS rule. CSS spec says this should work but I’ve found the in most cases browsers just ignore it.

[epi]

Still doesn’t work

/*****************************************************
 * Magic Mirror                                      *
 * Custom CSS                                        *
 *                                                   *
 * By Michael Teeuw http://michaelteeuw.nl           *
 * MIT Licensed.                                     *
 *                                                   *
 * Add any custom CSS below.                         *
 * Changes to this files will be ignored by GIT. *
 *****************************************************/

body {	
}

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

[j.e.f.f]

@epi Now you need to apply your font to various elements of the layout. All you’ve done to this point is declare the availability of the font. Try something like this:

body * {
  font-family: "SF";
}

That might get the job done, but there may be more specific rules you need to write to override in other cases. Try this and see how far it gets you.

[epi]

thank you!