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

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