Navigation

    MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.15.0 is available! For more information about this release, check out this topic.

    SOLVED change font of modules (local fonts)

    Custom CSS
    7
    20
    13109
    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
      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
      • broberg
        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
          foryas @broberg last edited by

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

          Sean broberg 2 Replies Last reply Reply Quote 0
          • Sean
            Sean Module Developer @foryas last edited by

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

            1 Reply Last reply Reply Quote -2
            • broberg
              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
                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?

                broberg 1 Reply Last reply Reply Quote 0
                • broberg
                  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
                    foryas @broberg last edited by

                    @broberg so thanks my friend solved.

                    1 Reply Last reply Reply Quote 1
                    • B
                      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
                        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;
                        }
                        
                        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 Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy