Changing Custom Font Type Within Magic Mirror

[Winter]

Hello Broberg,

I have attached the code for both my custom.css and main.css files below:

Also, addressing your mention of an “update”, is that an update in terms of the software or an edit by the user to the default main.css?

Custom.css file:

/*****************************************************
 * Magic Mirror                                      *
 * Custom CSS                                        *
 *                                                   *
 * By Michael Teeuw http://michaelteeuw.nl           *
 * MIT Licensed.                                     *
 *                                                   *
 * Add any custom CSS below.                         *
 * Changes to this files will be ignored by GIT. *
 *****************************************************/

body {
}
	@font-face {
	  font-family: Alcubierre;
	  font-style: normal; 
	  font-weight: 100;
	  src: url("/home/pi/MagicMirror/fonts/Alcubierre.ttf") format("truetype");
	  src: url("/home/pi/MagicMirror/fonts/Alcubierre.woff") format("woff");
	}

	
	@font-face{
	  font-family: Luxia;
	  src: url("/home/pi/MagicMirror/fonts/Luxia-Display.ttf") format("truetype");
	  font-weight: normal;
	  font-style: normal; 
	}

	.calendar {
	   font-family: Luxia;

	}

When I run the mirror, I keep either the Luxia or the Alcubierre section commented so only one runs. Though, as you can see here, I have the Luxia font in “.ttf” format and the Alcubierre font in both “.ttf” and “.woff” format, yet when I run the program neither file seems to achieve the desired result of changing my font to either “Luxia” or “Alcubierre”.

---

I have also attached my main.css file because I may have unknowingly made a few edits to it which might’ve caused the custom.css file to not run properly.

Main.css:

html {
  cursor: none;
  overflow: hidden;
  background: #000;
}

::-webkit-scrollbar {
  display: none;
}

body {
  margin: 60px;
  position: absolute;
  height: calc(100% - 120px);
  width: calc(100% - 120px);
  background: #000;
  color: #aaa;
  //font-family: "Roboto Thin", sans-serif;
  //font-family: "Montserrat", sans-serif;
  //font-family: Luxia;
  font-weight: normal;
  font-style: normal; 
  font-weight: 400;
  font-size: 2em;
  line-height: 1.5em;
  -webkit-font-smoothing: antialiased;
}

/**
 * Default styles.
 */

.dimmed {
  //color: #666;
  color: #fff;
}

.normal {
  //color: #999;
  color: #fff;
}

.bright {
  color: #fff;
}

.xsmall {
  font-size: 15px;
  line-height: 20px;
}

.small {
  font-size: 20px;
  line-height: 25px;
}

.medium {
  font-size: 30px;
  line-height: 35px;
}

.large {
  font-size: 65px;
  line-height: 65px;
}

.xlarge {
  font-size: 75px;
  line-height: 75px;
  letter-spacing: -3px;
}

.thin {
  //font-family: Roboto, sans-serif;
  font-weight: 100;

  //font-family: Luxia;
}

.light {
  //font-family: "Roboto Condensed", sans-serif;
  //font-family: Luxia;
  font-weight: 300;

  //font-family: Roboto, sans-serif;
}

.regular {
  //font-family: "Roboto Condensed", sans-serif;
  //font-family: Luxia;  
  font-weight: 400;

  //font-family: Roboto, sans-serif;

}

.bold {
  //font-family: "Roboto Condensed", sans-serif;
  //font-family: Luxia;  
  font-weight: 700;

  //font-family: Roboto, sans-serif;

}

.align-right {
  text-align: right;
}

.align-left {
  text-align: left;
}

header {
  //text-transform: uppercase;
  font-size: 25px;
  //font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
  //font-family: "Roboto Condensed";  
  font-weight: 400;

  //font-family: Roboto, sans-serif;



  border-bottom: 1px solid #999;
  line-height: 15px;
  padding-bottom: 5px;
  margin-bottom: 10px;
  //color: #999;
  color: #fff;
}

sup {
  font-size: 50%;
  line-height: 50%;
}

/**
 * Module styles.
 */

.module {
  margin-bottom: 30px;
}

.region.bottom .module {
  margin-top: 30px;
  margin-bottom: 0;
}

.no-wrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/**
 * Region Definitions.
 */

.region {
  position: absolute;
}

.region.fullscreen {
  position: absolute;
  top: -60px;
  left: -60px;
  right: -60px;
  bottom: -60px;
  pointer-events: none;
}

.region.fullscreen * {
  pointer-events: auto;
}

.region.right {
  right: 0;
  text-align: right;
}

.region.top {
  top: 0;
}

.region.top .container {
  margin-bottom: 25px;
}

.region.bottom .container {
  margin-top: 25px;
}

.region.top .container:empty {
  margin-bottom: 0;
}

.region.top.center,
.region.bottom.center {
  left: 50%;
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.region.top.right,
.region.top.left,
.region.top.center {
  top: 100%;
}

.region.bottom {
  bottom: 0;
}

.region.bottom .container:empty {
  margin-top: 0;
}

.region.bottom.right,
.region.bottom.center,
.region.bottom.left {
  bottom: 100%;
}

.region.bar {
  width: 100%;
  text-align: center;
}

.region.third,
.region.middle.center {
  width: 100%;
  text-align: center;
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.region.upper.third {
  top: 33%;
}

.region.middle.center {
  top: 50%;
}

.region.lower.third {
  top: 66%;
}

.region.left {
  text-align: left;
}

.region table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
}

[broberg]

@winter

Updates to the magicmirror software.
You can keep the changes in the main.css, but you will get an error the day you try to update the magicmirror to a newer version.

Try using this :

	@font-face{
	  font-family: Luxia;
	  src: url("../fonts/Luxia-Display.ttf") format("truetype");
	}

Note that the file path is based on where your css files is and where the fonts are.

You can place the fonts directly in to the css folder, if you do that the file path (url) would be like this :

 	@font-face{
	  font-family: Luxia;
	  src: url("Luxia-Display.ttf") format("truetype");
	}

[Winter]

Hey @broberg, I tried your edits and it seems that “Luxia” is now working, though when I try the exact setup for “Alcubierre”, it defaults back to the font shown in the first image I attached. Would you suggest trying to reinstall the font for Alcubierre and seeing if that works or would you have any further recommendations?

[broberg]

@winter

check you have the spelling correct for the filename, and use only the ttf file (I don’t know why there is two different format files for the same font anyways)

[Winter]

@broberg Ah, that seems to be what the problem was. Thank you so much for your help in solving this issue!

As for the two different files I went ahead and removed the .woff file from the program.