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