Navigation

    MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    ,Change Fonts

    Custom CSS
    css custom font raspberry pi 3
    3
    8
    3114
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Lorenzo_Zappa
      Lorenzo_Zappa last edited by 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

      1 Reply Last reply Reply Quote 0
      • P
        PhilReis last edited by 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.

        1 Reply Last reply Reply Quote 0
        • Lorenzo_Zappa
          Lorenzo_Zappa last edited by Lorenzo_Zappa

          @philreis unfortunately nothing changes…
          Still not working

          1 Reply Last reply Reply Quote 0
          • P
            PhilReis last edited by

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

            1 Reply Last reply Reply Quote 0
            • lavolp3
              lavolp3 Module Developer last edited by

              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.

              P 1 Reply Last reply Reply Quote 0
              • Lorenzo_Zappa
                Lorenzo_Zappa last edited by

                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

                1 Reply Last reply Reply Quote 0
                • Lorenzo_Zappa
                  Lorenzo_Zappa last edited by

                  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

                  1 Reply Last reply Reply Quote 0
                  • P
                    PhilReis @lavolp3 last edited by

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

                    1 Reply Last reply Reply Quote 0
                    • 1 / 1
                    • First post
                      Last post
                    Enjoying MagicMirror? Please consider a donation!
                    MagicMirror created by Michael Teeuw.
                    Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                    This forum is using NodeBB as its core | Contributors
                    Contact | Privacy Policy