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 Fontsize

    Scheduled Pinned Locked Moved Custom CSS
    9 Posts 5 Posters 19.2k Views 6 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.
    • R Offline
      reaper81
      last edited by

      Hello everyone,

      can I change the fontsize in general? I have a lot of modules but not enougth space on the screen. Thanks a lot.

      strawberry 3.141S 1 Reply Last reply Reply Quote 0
      • strawberry 3.141S Offline
        strawberry 3.141 Project Sponsor Module Developer @reaper81
        last edited by strawberry 3.141

        @reaper81 yes you can

        .xsmall {
          font-size: 15px;
          line-height: 20px;
        }
        
        .small {
          font-size: 20px;
          line-height: 25px;
        }
        
        .medium {
          font-size: 30px;
          line-height: 35px;
        }
        
        .large {
          font-size: 65px;
          line-height: 65px;
        }
        
        .xlarge {
          font-size: 75px;
          line-height: 75px;
          letter-spacing: -3px;
        }
        

        put that in your custom.css file, change the numbers to your liking and you will cover most of the modules which uses those css classes

        or what @j-e-f-f suggested in the other thread https://forum.magicmirror.builders/post/25506 to scale everything in the same portion

        Please create a github issue if you need help, so I can keep track

        1 Reply Last reply Reply Quote 1
        • R Offline
          reaper81
          last edited by

          thanks, i will try it. strange that nobody asked this before.

          1 Reply Last reply Reply Quote 0
          • A Offline
            anustart
            last edited by

            This post is deleted!
            1 Reply Last reply Reply Quote 0
            • A Offline
              anustart
              last edited by

              Do I need to past all of the above in CSS file?

              Is this redefine what the preset fonts already are?

              J 1 Reply Last reply Reply Quote 0
              • J Offline
                j.e.f.f Project Sponsor Module Developer @anustart
                last edited by j.e.f.f

                @anustart if you simply paste the above you’ll have no change, as I believe these are the defaults for these classes. Modify the values for font-size and line-height to your liking. You may also want to add letter-spacing properties to decrease space between letters in order to fit more on one line. Example:

                .medium {
                  font-size: 26px;
                  line-height: 30px;
                  letter-spacing: -2px;
                }
                

                If you really want to get your hands dirty, you may want to consider switching to a narrow font. (I believe RobotoCondensed is already included by default):

                .medium {
                  font-family: 'RobotoCondensed';
                  font-size: 26px;
                  line-height: 30px;
                  letter-spacing: -2px;
                }
                
                A 1 Reply Last reply Reply Quote 1
                • A Offline
                  anustart @j.e.f.f
                  last edited by

                  @j.e.f.f that work!

                  1 Reply Last reply Reply Quote 0
                  • ? Offline
                    A Former User
                    last edited by

                    @j.e.f.f said in Change Fontsize:

                    RobotoCondensed

                    But that leads to a general question about the fonts :
                    RobotoCondensed is not in the fonts directory, they all have an addition, like RobotoCondensed-light, etc…
                    Does that matter ?
                    The main.css uses ‘Roboto Condensed’.
                    Again, is that difference important ?
                    Thanks

                    J 1 Reply Last reply Reply Quote 0
                    • J Offline
                      j.e.f.f Project Sponsor Module Developer @Guest
                      last edited by j.e.f.f

                      @howi42 it just means that there are several weights available. When you use the font in your CSS, you can specify the weight as follows:

                      font-family: "Roboto Condensed";
                      font-weight: normal; /* bold, 300, 100, etc. */
                      
                      1 Reply Last reply Reply Quote 1
                      • 1 / 1
                      • 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