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.7k 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
                        • A Offline
                          Aaaxel @Guest
                          last edited by

                          @hango Aaand now that works! Great, thanks! :ok_hand:
                          So how did you find the others nbames like “newsfeed-source”, “newsfeed.title” etc…? I would like to do it by myself next time :winking_face:

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

                            This post is deleted!
                            1 Reply Last reply Reply Quote 0

                            Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                            Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                            With your input, this post could be even better 💗

                            Register Login
                            • 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