• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.
  • A Offline
    anustart
    last edited by Aug 8, 2017, 2:34 AM

    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 Aug 8, 2017, 1:34 PM Reply Quote 0
    • J Offline
      j.e.f.f Project Sponsor Module Developer @anustart
      last edited by j.e.f.f Aug 8, 2017, 1:37 PM Aug 8, 2017, 1:34 PM

      @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 Aug 9, 2017, 12:57 AM Reply Quote 1
      • A Offline
        anustart @j.e.f.f
        last edited by Aug 9, 2017, 12:57 AM

        @j.e.f.f that work!

        1 Reply Last reply Reply Quote 0
        • ? Offline
          A Former User
          last edited by Sep 3, 2017, 9:46 AM

          @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 Sep 3, 2017, 12:14 PM Reply Quote 0
          • J Offline
            j.e.f.f Project Sponsor Module Developer @Guest
            last edited by j.e.f.f Sep 3, 2017, 12:15 PM Sep 3, 2017, 12:14 PM

            @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