Read the statement by Michael Teeuw here.
I need help to change the fonts
-
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 :-)
-
@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 incustom.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 samefont-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 namelobster-bold-custom-class
will get Lobster Bold. -
-
@j.e.f.f Thank you very much. It worked!!!