,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.

[TazDev]

what I inserted in my custom.css

:root {
        --font-primary: "SF-Compact";
        --font-secondary: "SF-Pro";
}

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

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

both files I extracted from my Mac and copied it to ~/MagicMirror/fonts

[davidgagne]

@TazDev Thanks! This is exactly what I needed to change my MagicMirror so it displays Aurabesh for some of the data.