change font of modules (local fonts)

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!

dangerousden

@epi

Did you ever get this working? I’m having exactly the same issue. I have the holiday countdown module. We’re off to Disney, so I thought it would be fun to put it in a Disney font. I’ve downloaded one and put it into a fonts folder under MagicMirror.
I have defined it with an @ statement, included the fonts/ source folder and file name, and added it to the countdown module, but it is still not changing the font for that module :(

sdetweil

@dangerousden look at the css/roboto.css, or the css/fontawesome.css

and then main.css to see how they are used