<![CDATA[,Change Fonts]]>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

]]>https://forum.magicmirror.builders/topic/8758/change-fontsRSS for NodeMon, 20 Jul 2026 04:39:39 GMTSun, 16 Sep 2018 18:19:26 GMT60<![CDATA[Reply to ,Change Fonts on Mon, 03 Jun 2024 16:58:24 GMT]]>@TazDev Thanks! This is exactly what I needed to change my MagicMirror so it displays Aurabesh for some of the data.

]]>https://forum.magicmirror.builders/post/118113https://forum.magicmirror.builders/post/118113Mon, 03 Jun 2024 16:58:24 GMT<![CDATA[Reply to ,Change Fonts on Sun, 29 May 2022 19:23:19 GMT]]>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

]]>https://forum.magicmirror.builders/post/102071https://forum.magicmirror.builders/post/102071Sun, 29 May 2022 19:23:19 GMT<![CDATA[Reply to ,Change Fonts on Mon, 17 Sep 2018 11:06:56 GMT]]>@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.

]]>https://forum.magicmirror.builders/post/44497https://forum.magicmirror.builders/post/44497Mon, 17 Sep 2018 11:06:56 GMT<![CDATA[Reply to ,Change Fonts on Mon, 17 Sep 2018 07:49:37 GMT]]>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

]]>https://forum.magicmirror.builders/post/44495https://forum.magicmirror.builders/post/44495Mon, 17 Sep 2018 07:49:37 GMT<![CDATA[Reply to ,Change Fonts on Mon, 17 Sep 2018 07:41:42 GMT]]>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

]]>https://forum.magicmirror.builders/post/44494https://forum.magicmirror.builders/post/44494Mon, 17 Sep 2018 07:41:42 GMT<![CDATA[Reply to ,Change Fonts on Mon, 17 Sep 2018 07:03:43 GMT]]>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.

]]>https://forum.magicmirror.builders/post/44491https://forum.magicmirror.builders/post/44491Mon, 17 Sep 2018 07:03:43 GMT<![CDATA[Reply to ,Change Fonts on Mon, 17 Sep 2018 05:44:34 GMT]]>Try to put your fonts directory in the Magic Mirror directory.

]]>https://forum.magicmirror.builders/post/44489https://forum.magicmirror.builders/post/44489Mon, 17 Sep 2018 05:44:34 GMT<![CDATA[Reply to ,Change Fonts on Sun, 16 Sep 2018 19:32:15 GMT]]>@philreis unfortunately nothing changes…
Still not working

]]>https://forum.magicmirror.builders/post/44478https://forum.magicmirror.builders/post/44478Sun, 16 Sep 2018 19:32:15 GMT<![CDATA[Reply to ,Change Fonts on Sun, 16 Sep 2018 18:47:23 GMT]]>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.

]]>https://forum.magicmirror.builders/post/44477https://forum.magicmirror.builders/post/44477Sun, 16 Sep 2018 18:47:23 GMT