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

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)

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");
	}

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;
}

To see where you went wrong, pleas post your custom.css file.

But common things to adress, search path to the font file, the font file sets the format, what does your files end with?

place new css-code after body{}