diff --git a/gatsby-browser.js b/gatsby-browser.js
index 05f5c9b5..5f352dea 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { FilterProvider } from './src/context/FilterContext';
+import './static/fonts.css';
 
 export const wrapRootElement = ({ element }) => (
   <FilterProvider>{element}</FilterProvider>
-)
+);
diff --git a/package-lock.json b/package-lock.json
index 042d8b76..f8210af3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8005,6 +8005,15 @@
         "@babel/runtime": "^7.7.6"
       }
     },
+    "gatsby-plugin-web-font-loader": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-web-font-loader/-/gatsby-plugin-web-font-loader-1.0.4.tgz",
+      "integrity": "sha512-3c39bX9CcsYJQFhhmTyjuMJSqpld2rX+HsTOxP9k1PKFR4Rvo3lpzBW4d1tVpmUesR8BNL6u9eHT7/XksS1iog==",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "webfontloader": "^1.6.28"
+      }
+    },
     "gatsby-react-router-scroll": {
       "version": "2.1.19",
       "resolved": "https://registry.npmjs.org/gatsby-react-router-scroll/-/gatsby-react-router-scroll-2.1.19.tgz",
@@ -16299,6 +16308,11 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
+    "webfontloader": {
+      "version": "1.6.28",
+      "resolved": "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz",
+      "integrity": "sha1-23hhKSU8tujq5UwvsF+HCvZnW64="
+    },
     "webpack": {
       "version": "4.41.5",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.41.5.tgz",
diff --git a/package.json b/package.json
index 96c0d33f..cdabb3a1 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "gatsby-plugin-react-helmet": "^3.1.16",
     "gatsby-plugin-sharp": "^2.3.5",
     "gatsby-plugin-styled-components": "^3.1.16",
+    "gatsby-plugin-web-font-loader": "^1.0.4",
     "gatsby-source-filesystem": "^2.1.40",
     "gatsby-transformer-sharp": "^2.3.7",
     "normalize.css": "^8.0.1",
diff --git a/src/components/layout.js b/src/components/layout.js
index 0dd9a7d5..019b334d 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -113,7 +113,6 @@ const GlobalStyle = createGlobalStyle`
     border-radius: 6px;
     border: 3px solid var(--blue);
   }
-
 `;
 
 // Component Styles
diff --git a/src/fonts/fira_mono-regular-webfont.woff b/src/fonts/fira_mono-regular-webfont.woff
new file mode 100644
index 00000000..7e467d1f
Binary files /dev/null and b/src/fonts/fira_mono-regular-webfont.woff differ
diff --git a/src/fonts/fira_mono-regular-webfont.woff2 b/src/fonts/fira_mono-regular-webfont.woff2
new file mode 100644
index 00000000..91736386
Binary files /dev/null and b/src/fonts/fira_mono-regular-webfont.woff2 differ
diff --git a/src/fonts/fira_mono-regular_italic-webfont.woff b/src/fonts/fira_mono-regular_italic-webfont.woff
new file mode 100644
index 00000000..80385527
Binary files /dev/null and b/src/fonts/fira_mono-regular_italic-webfont.woff differ
diff --git a/src/fonts/fira_mono-regular_italic-webfont.woff2 b/src/fonts/fira_mono-regular_italic-webfont.woff2
new file mode 100644
index 00000000..d4b71d51
Binary files /dev/null and b/src/fonts/fira_mono-regular_italic-webfont.woff2 differ
diff --git a/static/fonts.css b/static/fonts.css
new file mode 100644
index 00000000..e0a145a6
--- /dev/null
+++ b/static/fonts.css
@@ -0,0 +1,16 @@
+  /* Fonts */
+  @font-face {
+    font-family: 'Fira Mono';
+    font-weight: 400;
+    font-style: normal;
+    src: url('../src/fonts/fira_mono-regular-webfont.woff2') format('woff2'),
+         url('../src/fonts/fira_mono-regular-webfont.woff') format('woff');
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Fira Mono';
+    font-weight: 400;
+    font-style: italic;
+    src: url('../src/fonts/fira_mono-regular_italic-webfont.woff2') format('woff2'), url('../src/fonts/fira_mono-regular_italic-webfont.woff') format('woff');
+    font-display: swap;
+  }