I need help to change the fonts

enith2478

Hi! I’d been trying to change the font s and it doesn’t work just by changing the name in the main CSS. What am I missing? I already created folders with the fonts inside the fonts folders.
I appreciate all help.

Thanks :-)

j.e.f.f

@enith2478 You need to do three things in order to use different fonts in MagicMirror.

You need the physical font files, in WOFF or WOFF2 format. If you are trying to use TTF or OTF, then you’ll need to convert these to a web format. You can use an online tool like FontSquirrel.com to to do this. Furthermore they need to be in a location that will be accessible to the browser when MagicMirror is running. You can make a new folder under the existing fonts folder for this if you wish.
In your CSS you need to make a @font-face entry. You can do this in custom.css if you like. Typically you put this at the top of the file, but it just needs to be declared before you try to use the new font in a CSS class.

@font-face {
    font-family: 'Lobster';
    src: url('path/to/lobster-regular-webfont.woff2') format('woff2'),
         url('path/to/lobster-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

In the above example, multiple font formats are specified. This is to provide a fallback in case WOFF2 isn’t supported. Given that we are using a known browser, this likely isn’t necessary, but old web habits die hard for me :).

If you have another weight, say a bold version, you’ll need another @font-face entry with the same font-family name. Example:

@font-face { /* normal weight */
    font-family: 'Lobster';
    src: url('path/to/lobster-regular-webfont.woff2') format('woff2'),
         url('path/to/lobster-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face { /* bold weight */
    font-family: 'Lobster'; /* use the same name here */
    src: url('path/to/lobster-bold-webfont.woff2') format('woff2'),
         url('path/to/lobster-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

Now anywhere in your CSS rules you can specify the font family:

.lobster-custom-class {
  font-family: 'Lobster';
  font-weight: bold;
}

.lobster-bold-custom-class {
  font-family: 'Lobster';
  font-weight: bold;
}

In the above example, an element with the class name lobster-custom-class will get Lobster Regular, while any element with the class name lobster-bold-custom-class will get Lobster Bold.

enith2478

@j.e.f.f Thank you very much. It worked!!!