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 MM fonts

    Scheduled Pinned Locked Moved Troubleshooting
    13 Posts 3 Posters 2.4k Views 2 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.
    • S Offline
      sdetweil @Aaaxel
      last edited by

      @aaaxel so, you want to add an entry to css/custom.css that changes the font name
      which is done in the body statement in main.css (don’t edit main.css)

      if custom.css doesn’t exist, create it like this

      cd ~/MagicMirror
      touch css/coustom.css
      

      then u can edit it (custom/css) and add

      body { 
           font-family: "Roboto Condensed", sans-serif;
      }
      

      with your new font family instead

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      A 1 Reply Last reply Reply Quote 0
      • A Offline
        Aaaxel @sdetweil
        last edited by

        @sdetweil Is that all? nothing changes :grinning_face_with_sweat: I may have to do something obvious for you that I don’t know as a beginner

        S ? 2 Replies Last reply Reply Quote 0
        • S Offline
          sdetweil @Aaaxel
          last edited by

          @aaaxel i’m not sure what you said…

          fonts go in the fonts folder, yes?

          Sam

          How to add modules

          learning how to use browser developers window for css changes

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

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

              @hango Cool! It half-worked: Most of the fonts have changed, but there is still some text in roboto, especially in the default news module…

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

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

                  @hango ok I got it, I should be able to update every module this way, thanks!

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

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

                      @hango I just tried your 2 solutions but newsfeed still don’t change…

                      This is what I have in custom.css:

                      @import url('https://fonts.googleapis.com/css2?family=Spartan:wght@200;400;600;800&display=swap');
                      
                      body { 
                           font-family: "Spartan", sans-serif;
                           font-weight: 800;
                      }
                           .newsfeed {
                           font-family: "Spartan", sans-serif;
                           font-weight: 600;
                      }
                      
                      

                      I also tried this way:

                      @import url('https://fonts.googleapis.com/css2?family=Spartan:wght@200;400;600;800&display=swap');
                      
                      body { 
                           font-family: "Spartan", sans-serif;
                           font-weight: 800;
                           .newsfeed {
                           font-family: "Spartan", sans-serif;
                           font-weight: 600;
                      }
                      
                      }
                      
                      
                      
                      1 Reply Last reply Reply Quote 0
                      • ? Offline
                        A Former User
                        last edited by A Former User

                        This post is deleted!
                        A 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