MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    change font of modules (local fonts)

    Scheduled Pinned Locked Moved Solved Custom CSS
    20 Posts 7 Posters 18.8k Views 7 Watching
    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.
    • F Offline
      foryas
      last edited by

      hi guys,how i can change fonts of modules using custom.css and use local font?

      1 Reply Last reply Reply Quote 0
      • brobergB Offline
        broberg Project Sponsor
        last edited by

        try adding add this to custom.css and your font to the fonts folder

        @font-face {
          font-family: YourFont;
          font-style: normal;
          font-weight: 100;
          src:
            local("YourFont"),
            url("fonts/Yourfont.ttf") format("truetype");
        }
        
        
        F 1 Reply Last reply Reply Quote 0
        • F Offline
          foryas @broberg
          last edited by

          @broberg if i want to only change font of special module not all?

          ? brobergB 2 Replies Last reply Reply Quote 0
          • ? Offline
            A Former User @foryas
            last edited by

            @foryas you can also do. But you need to understand css. Study it.

            1 Reply Last reply Reply Quote -2
            • brobergB Offline
              broberg Project Sponsor @foryas
              last edited by

              @foryas

              .calendar {
              Font-family : YourFont;
              }
              

              That would change the font for the module calendar

              F 1 Reply Last reply Reply Quote 2
              • F Offline
                foryas @broberg
                last edited by

                @broberg said in change font of modules (local fonts):

                .calendar

                how i can find class (.calendar for your example) of any module to use that?

                brobergB 1 Reply Last reply Reply Quote 0
                • brobergB Offline
                  broberg Project Sponsor @foryas
                  last edited by

                  @foryas open the developer options in electron or check with F12 in your local browser to see the code.

                  But the main module class name are always the name of the module as put in the config file

                  .calendar for calendar
                  .alarm for alarm
                  .MMM-Instagram for MMM-Instagram

                  etc etc

                  F 1 Reply Last reply Reply Quote 0
                  • F Offline
                    foryas @broberg
                    last edited by

                    @broberg so thanks my friend solved.

                    1 Reply Last reply Reply Quote 1
                    • B Offline
                      bekirs
                      last edited by yawns

                      hi all,

                      I tried to change my newsfeed font and i added below commands to custom.css but it didnt work. What should i do ?

                      Thanks

                      .newsfeed {
                        font-family: Verdana;
                        font-style: normal;
                        font-weight: 100;
                        src:
                          local("Verdana"),
                          url("/home/pi/MagicMirror/fonts/Verdana.ttf") format("truetype");
                      }
                      
                      N 1 Reply Last reply Reply Quote 0
                      • N Offline
                        ninjabreadman @bekirs
                        last edited by ninjabreadman

                        @bekirs @font-face is not a style rule, but declaration (“at-rule”). Here’s an explanation of how it works.

                        So your code should instead be:

                        @font-face {
                          font-family: Verdana;
                          font-style: normal;
                          font-weight: 100;
                          src:
                            local("Verdana"),
                            url("/home/pi/MagicMirror/fonts/Verdana.ttf") format("truetype");
                        }
                        
                        .newsfeed {
                          font-family: Verdana;
                        }
                        

                        This avoids using the local version of the Verdana font. Why not use the local Verdana font (or install your desired alternative) and use the below instead?

                        .newsfeed {
                          font-family: Verdana;
                        }
                        

                        Problem with config or JavaScript? Copy/paste it into JSHint.
                        Check out the detailed walkthroughs on install, config, modules, etc.

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 1 / 2
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy