feat: Mas fuentes y la definicion de todas ellas

Decidi agregar una fuente monospace y para ello elegi a Hack que es de
mis preferidas.

Junto con esto, agrege todos los @fontfaces necesarios para acceder a
las fuentes existente

Tambien defini la fuente por default para el codigo a Hack

public/mix-manifest.json

@@ -1,6 +1,6 @@
 {
     "/js/admin.js": "/js/admin.js?id=634ede2c6c16b7d4ff99",
     "/js/app.js": "/js/app.js?id=17a7ca520b20b88679c7",
-    "/css/app.css": "/css/app.css?id=33f337856ab01c7673b7",
-    "/css/prism.css": "/css/prism.css?id=bae0df0e96c2ea60a797"
+    "/css/app.css": "/css/app.css?id=fea5714fe281a4e91d5a",
+    "/css/prism.css": "/css/prism.css?id=e372f069621187846b44"
 }

resources/sass/app.scss

@@ -1,17 +1,8 @@
 @import "~purecss/build/pure.css";
 @import "./colors.scss";
+@import "./fonts.scss";
 @import "./prism-theme.scss";
 
-/******************************************************************************
-    => Font
-*******************************************************************************/
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Raleway'),
-    url('/fonts/Raleway-Regular.ttf') format('truetype'),
-}
 
 /******************************************************************************
     => General
@@ -20,7 +11,7 @@ body {
     color: $foreground-color;
     background-color: $background-color;
     overflow-y: scroll;
-    font-family: 'Raleway';
+    font-family: 'Raleway', sans-serif;
 }
 
 .container {

resources/sass/fonts.scss

@@ -0,0 +1,213 @@
+/******************************************************************************
+    => Fonts
+*******************************************************************************/
+/******************************************************************************
+    => Hack
+*******************************************************************************/
+@font-face {
+  font-family: 'Hack';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Hack Bold'), url('/fonts/Hack-Bold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Hack';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Hack Bold Italic'), url('/fonts/Hack-BoldItalic.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Hack';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Hack Italic'), url('/fonts/Hack-Italic.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Hack';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Hack'), url('/fonts/Hack-Regular.ttf') format('truetype');
+}
+
+/******************************************************************************
+    => OpenSans 
+*******************************************************************************/
+@font-face {
+  font-family: 'OpenSans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('OpenSans Bold'), url('/fonts/OpenSans-Bold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'OpenSans';
+  font-style: italic;
+  font-weight: 700;
+  src: local('OpenSans Bold Italic'), url('/fonts/OpenSans-BoldItalic.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'OpenSans';
+  font-style: normal;
+  font-weight: 800;
+  src: local('OpenSans Extra Bold'), url('/fonts/OpenSans-ExtraBold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'OpenSans';
+  font-style: italic;
+  font-weight: 800;
+  src: local('OpenSans Extra Bold Italic'), url('/fonts/OpenSans-ExtraBoldItalic.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'OpenSans';
+  font-style: italic;
+  font-weight: 400;
+  src: local('OpenSans Italic'), url('/fonts/OpenSans-Italic.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'OpenSans';
+  font-style: normal;
+  font-weight: 300;
+  src: local('OpenSans Light'), url('/fonts/OpenSans-Light.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'OpenSans';
+  font-style: italic;
+  font-weight: 300;
+  src: local('OpenSans Light Italic'), url('/fonts/OpenSans-LightItalic.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'OpenSans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('OpenSans'), url('/fonts/OpenSans-Regular.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'OpenSans';
+  font-style: normal;
+  font-weight: 600;
+  src: local('OpenSans SemiBold'), url('/fonts/OpenSans-SemiBold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'OpenSans';
+  font-style: italic;
+  font-weight: 600;
+  src: local('OpenSans Bold'), url('/fonts/OpenSans-SemiBoldItalic.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'OpenSans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('OpenSans Bold'), url('/fonts/OpenSans-Bold.ttf') format('truetype');
+}
+
+/******************************************************************************
+    => Raleway
+*******************************************************************************/
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Raleway Black'), url('/fonts/Raleway-Black.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Raleway';
+  font-style: italic;
+  font-weight: 900;
+  src: local('Raleway Black Italic'), url('/fonts/Raleway-BlackItalic.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Raleway Bold'), url('/fonts/Raleway-Bold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Raleway';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Raleway Bold Italic'), url('/fonts/Raleway-BoldItalic.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 800;
+  src: local('Raleway Extra Bold'), url('/fonts/Raleway-ExtraBold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Raleway';
+  font-style: italic;
+  font-weight: 800;
+  src: local('Raleway Extra Bold Italic'), url('/fonts/Raleway-ExtraBoldItalic.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 200;
+  src: local('Raleway Extra Light'), url('/fonts/Raleway-ExtraLight.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Raleway';
+  font-style: italic;
+  font-weight: 200;
+  src: local('Raleway Extra Light Italic'), url('/fonts/Raleway-ExtraLightItalic.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Raleway';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Raleway Italic'), url('/fonts/Raleway-Italic.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Raleway Light'), url('/fonts/Raleway-Light.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Raleway';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Raleway Light Italic'), url('/fonts/Raleway-LightItalic.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Raleway Medium'), url('/fonts/Raleway-Medium.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Raleway';
+  font-style: italic;
+  font-weight: 500;
+  src: local('Raleway Medium Italic'), url('/fonts/Raleway-MediumItalic.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Raleway Regular'), url('/fonts/Raleway-Regular.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Raleway Semi Bold'), url('/fonts/Raleway-SemiBold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Raleway';
+  font-style: italic;
+  font-weight: 600;
+  src: local('Raleway Semi Bold Italic'), url('/fonts/Raleway-SemiBoldItalic.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Raleway Thin'), url('/fonts/Raleway-Thin.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Raleway';
+  font-style: italic;
+  font-weight: 100;
+  src: local('Raleway Thin Italic'), url('/fonts/Raleway-ThinItalic.ttf') format('truetype');
+}

resources/sass/prism-theme.scss

@@ -6,8 +6,8 @@ pre[class*="language-"] {
 }
 
 code[class*="language-"], pre[class*="language-"] {
-    font-family: monospace;
-    font-size: 1.1em;
+    font-family: 'Hack', monospace;
+    font-size: 0.9em;
     line-height: 1.2em;
     text-shadow: none;
 }