3. My own fonts
MagicMirror² v2.5.0 is available! For more information about this release, check out this topic.

My own fonts

  • Z

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

    0 1 Reply

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

    1
  • Z

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

    0 1 Reply
  • Module Developer

    @zkab

     @font-face {
  font-family: shotgunk;
  font-style: normal;
  font-weight: 400;

  src:
    local("shotgunk"),
    url("../fonts/shotgunk/SHOTGUNK.TTF") format("truetype");

}
    1
  • Z

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

    0 1 Reply
  • 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)

    0
  • Z

    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 ?

    0
  • Module Developer

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

    0
  • Z

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

    0