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.

    My own fonts

    Scheduled Pinned Locked Moved Solved Troubleshooting
    9 Posts 3 Posters 3.5k 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.
    • Z Offline
      zkab
      last edited by

      How can I load & use my own fonts in MM ?

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

        @zkab you can set the font in custom.css

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

        1 Reply Last reply Reply Quote 1
        • Z Offline
          zkab
          last edited by

          I have my own font ‘SHOTGUNK.TTF’ that I want to use in ‘helloworld’ … don’t figure out the syntax in custom.css

          brobergB 1 Reply Last reply Reply Quote 0
          • brobergB Offline
            broberg Project Sponsor @zkab
            last edited by broberg

            @zkab

             @font-face {
              font-family: shotgunk;
              font-style: normal;
              font-weight: 400;
            
              src:
                local("shotgunk"),
                url("../fonts/shotgunk/SHOTGUNK.TTF") format("truetype");
            
            }
            
            1 Reply Last reply Reply Quote 1
            • Z Offline
              zkab
              last edited by

              OK - I will place the code in custom.css but where do I store the actual font “SHOTGUNK.TTF” … in the MagicMirror/fonts subdir ?

              brobergB 1 Reply Last reply Reply Quote 0
              • brobergB Offline
                broberg Project Sponsor @zkab
                last edited by

                @zkab Yes, I placed my fonts in separate folders as well to keep it organized (doesn’t matter as long as the url in the css code goes to the font in question)

                1 Reply Last reply Reply Quote 0
                • Z Offline
                  zkab
                  last edited by zkab

                  Didn’t get it right …

                  What I want to do is write two textlines with ‘helloword’ - the first one with ‘upper_third’ and the second one with ‘bottom_bar’.
                  Fonts should be zapfchan (‘upper_third’) and shotgunk (‘bottom_bar’) but only ‘upper_third’ is OK.
                  I have place the fonts in a folder my-fonts …

                  :~/MagicMirror/fonts/my_fonts $ ls -l
                  total 96
                  -rwxr-xr-x 1 pi pi 34276 apr 6 15:32 SHOTGUNN.TTF
                  -rwxr-xr-x 1 pi pi 59964 apr 6 15:51 ZAFCHAB.TTF

                  My custom.css looks like this:

                  @font-face {
                    font-family: zapfchan;
                    font-style: normal;
                    font-weight: 400;
                    src:
                      local("zapfchan"),
                      url("../fonts/my_fonts/ZAFCHAB.TTF") format("truetype");
                  }
                  @font-face {
                    font-family: shotgunk;
                    font-style: normal;
                    font-weight: 400;
                    src:
                      local("shotgunk"),
                      url("../fonts/my_fonts/SHOTGUNK.TTF") format("truetype");
                  }
                  .region.upper.third .helloworld div {
                  font-size: 71px;
                  color: #74bbf1;
                  font-family: "zapfchan";
                  font-style: normal;
                  }
                  .region.bottom .helloworld div {
                  font-size: 100px;
                  color: #74bbf1;
                  font-family: "shotgunk";
                  font-style: normal;
                  }
                  
                  

                  Where have I missed ?

                  1 Reply Last reply Reply Quote 0
                  • brobergB Offline
                    broberg Project Sponsor
                    last edited by

                    doublecheck your spelling, you have SHOTGUNN.TTF and SHOTGUNK.TTF … Which is the correct filename?

                    1 Reply Last reply Reply Quote 0
                    • Z Offline
                      zkab
                      last edited by

                      Thanks - I didn’t saw the misspell … sorry
                      The font is SHOTGUNN.TTF and nothing else.
                      Problem is solved and thanks again.

                      1 Reply Last reply Reply Quote 0
                      • 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