MagicMirror² v2.5.0 is available! For more information about this release, check out this topic.

,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



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



  • @philreis unfortunately nothing changes…
    Still not working



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



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



  • 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



  • 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



  • @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.