My own fonts

[zkab]

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

[strawberry 3.141]

@zkab you can set the font in custom.css

[zkab]

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

[broberg]

@zkab

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

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

}

[zkab]

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

[broberg]

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

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

[broberg]

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

[zkab]

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