MagicMirror² v2.4.1 is available! For more information about this release, check out this topic.
Please read the release notes carefully since this update requires adjustments to your Raspberry Pi configuration!

My own fonts



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



  • @zkab you can set the font in custom.css



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


  • Module Developer

    @zkab

     @font-face {
      font-family: shotgunk;
      font-style: normal;
      font-weight: 400;
    
      src:
        local("shotgunk"),
        url("../fonts/shotgunk/SHOTGUNK.TTF") format("truetype");
    
    }
    


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


  • Module Developer

    @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)



  • 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 ?


  • Module Developer

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



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