,Change Fonts

Lorenzo_Zappa

Hello everyone,
I know this is a basic question but I wasn’t able to make it
Basically I want to change font in some (or all) modules, so far this is what I have done in my custom.css file:

@font-face {
        font-family: SF;
        src: url("/home/pi/.fonts/SFProDisplay-Medium.ttf") format("ttf");
        font-weight: normal;
        font-style: medium;
}

.newsfeed {
        font-family: SF;
}

.compliments {
        font-family: SF;
}

.calendar {
        font-family: SF;
}

And this is my font permissions in my ~/.fonts folder:

-rw-r--r-- 1 pi pi 499572 Sep 16 19:29 SFProDisplay-Medium.ttf

The issue is that whatever font I try it doesn’t work (even standard, already installed, fonts), but instead a default module is loaded…
Any help?
Lorenzo

PhilReis

Try this:

@font-face {
  font-family: "MyFont";
  font-style: normal;
  font-weight: 100;
  src:
    local("SF-Pro-Display-Light"),
    url("/fonts/SF-Pro-Display-Light.otf") format("truetype");
}

and i have change this too:

.thin {
  font-family: "MyFont";
  font-weight: 100;
}

.light {
  font-family: "MyFont";
  font-weight: 300;
}

.regular {
  font-family: "MyFont";
  font-weight: 400;
}

.bold {
  font-family: "MyFont";
  font-weight: 700;
}

hope it helps.

Lorenzo_Zappa

@philreis unfortunately nothing changes…
Still not working

PhilReis

Try to put your fonts directory in the Magic Mirror directory.

lavolp3

Better use an absolute path (as you did oiginally) instead of the relative one philreis suggested

@font-face {
  font-family: "MyFont";
  font-style: normal;
  font-weight: 100;
  src:
    local("SF-Pro-Display-Light"),
    url("/home/pi/.fonts/SF-Pro-Display-Light.otf") format("truetype");
}

The path philreis suggested cannot work as it is.

Lorenzo_Zappa

Ok, I have found a way to make it work, but I don’t like it very much…
Basically I have to add my lines of code in this file:

/home/pi/MagicMirror/fonts/roboto.css

Like this:

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

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 100;
  src:
    local("Roboto Thin"),
    local("Roboto-Thin"),
    url("node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.woff2") format("woff2"),
    url("node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.woff") format("woff"),
    url("node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.ttf") format("truetype");
}

And then everything works.
Any solution without using this work around? I don’t like it very much, and it is not so clean.
Thank you

Lorenzo_Zappa

I finally did it
I don’t know why but if I want to declare my font-face in my custom.css file the fonts folder containing all my fonts must be in the same directory or in a sub-directory.
Now everything works
Thank you all guys

PhilReis

@lavolp3 my solution works.
For the web server is the Magic Mirror directory the “root” directory. So you have to create the fonts directory in the Magic Mirror directory.