Added all Alegreya Font Variants, set Header to 'Alegreya-Black'

scss/_navbar.scss

@@ -53,8 +53,7 @@
 
   .container-fluid {
     position: relative;
-    height: ($navbar-toggler-padding-y * 2) + $navbar-toggler-font-size +
-      1.625rem;
+    height: ($navbar-toggler-padding-y * 2) + $navbar-toggler-font-size + 1.625rem;
   }
 }
 
@@ -63,26 +62,86 @@
 // Used for brand, project, or site names.
 
 @font-face {
-  font-family: "Alegreya";
+  font-family: 'Alegreya-Variable';
   src: url(../font/Alegreya-VariableFont_wght.ttf);
 }
 
 @font-face {
-  font-family: "Alegreya-Italic";
+  font-family: 'Alegreya-Italic-Variable';
   src: url(../font/Alegreya-Italic-VariableFont_wght.ttf);
 }
 
+@font-face {
+  font-family: 'Alegreya-Black';
+  src: url(../font/Alegreya-Black.ttf);
+}
+
+@font-face {
+  font-family: 'Alegreya-BlackItalic';
+  src: url(../font/Alegreya-BlackItalic.ttf);
+}
+
+@font-face {
+  font-family: 'Alegreya-Bold';
+  src: url(../font/Alegreya-Bold.ttf);
+}
+
+@font-face {
+  font-family: 'Alegreya-BoldItalic';
+  src: url(../font/Alegreya-BoldItalic.ttf);
+}
+
+@font-face {
+  font-family: 'Alegreya-ExtraBold';
+  src: url(../font/Alegreya-ExtraBold.ttf);
+}
+
+@font-face {
+  font-family: 'Alegreya-ExtraBoldItalic';
+  src: url(../font/Alegreya-ExtraBoldItalic.ttf);
+}
+
+@font-face {
+  font-family: 'Alegreya-Italic';
+  src: url(../font/Alegreya-Italic.ttf);
+}
+
+@font-face {
+  font-family: 'Alegreya-Medium';
+  src: url(../font/Alegreya-Medium.ttf);
+}
+
+@font-face {
+  font-family: 'Alegreya-MediumItalic';
+  src: url(../font/Alegreya-MediumItalic.ttf);
+}
+
+@font-face {
+  font-family: 'Alegreya';
+  src: url(../font/Alegreya-Regular.ttf);
+}
+
+@font-face {
+  font-family: 'Alegreya-SemiBold';
+  src: url(../font/Alegreya-SemiBold.ttf);
+}
+
+@font-face {
+  font-family: 'Alegreya-SemiBoldItalic';
+  src: url(../font/Alegreya-SemiBoldItalic.ttf);
+}
+
 .navbar-brand {
   &.navbar-brand-logo {
     margin-left: $navbar-brand-margin-end * 2;
     padding-left: 120px;
-    font-family: "Alegreya", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-    font-weight: bolder;
+    font-family: 'Alegreya-Black', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    // font-weight: bolder;
     color: $primary !important;
     font-size: 2rem;
 
     &::before {
-      content: " ";
+      content: ' ';
       display: inline-block;
       width: 120px;
       height: 110px;
@@ -98,8 +157,8 @@
     }
 
     &::after {
-      content: " ";
-      background-image: url("../img/hbbq_logo.png");
+      content: ' ';
+      background-image: url('../img/hbbq_logo.png');
       display: inline-block;
       position: absolute;
       top: 50%;
@@ -289,7 +348,7 @@
 
     @include media-breakpoint-down(lg) {
       flex: 1;
-      font-size: calc(1.375rem + 1.5vw);
+      font-size: calc(1rem + 1.5vw);
       white-space: nowrap;
       overflow-x: hidden;
       text-overflow: ellipsis;