,Change Fonts

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