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.


Log in to reply
 

Looks like your connection to MagicMirror Forum was lost, please wait while we try to reconnect.