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

      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