diff --git a/frontend/public/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lujVj9_mf.woff2 b/frontend/public/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lujVj9_mf.woff2
new file mode 100644
index 0000000..2ddc3bd
Binary files /dev/null and b/frontend/public/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lujVj9_mf.woff2 differ
diff --git a/frontend/public/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lujVj9_mf.woff2 b/frontend/public/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lujVj9_mf.woff2
new file mode 100644
index 0000000..0d82852
Binary files /dev/null and b/frontend/public/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lujVj9_mf.woff2 differ
diff --git a/frontend/public/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lujVj9_mf.woff2 b/frontend/public/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lujVj9_mf.woff2
new file mode 100644
index 0000000..df4cedd
Binary files /dev/null and b/frontend/public/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lujVj9_mf.woff2 differ
diff --git a/frontend/public/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lujVj9_mf.woff2 b/frontend/public/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lujVj9_mf.woff2
new file mode 100644
index 0000000..4042853
Binary files /dev/null and b/frontend/public/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lujVj9_mf.woff2 differ
diff --git a/frontend/public/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lujVj9_mf.woff2 b/frontend/public/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lujVj9_mf.woff2
new file mode 100644
index 0000000..87c63dc
Binary files /dev/null and b/frontend/public/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lujVj9_mf.woff2 differ
diff --git a/frontend/public/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7lujVj9w.woff2 b/frontend/public/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7lujVj9w.woff2
new file mode 100644
index 0000000..a045599
Binary files /dev/null and b/frontend/public/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7lujVj9w.woff2 differ
diff --git a/frontend/public/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lujVj9_mf.woff2 b/frontend/public/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lujVj9_mf.woff2
new file mode 100644
index 0000000..4128457
Binary files /dev/null and b/frontend/public/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lujVj9_mf.woff2 differ
diff --git a/frontend/public/fonts/hack-bold.woff b/frontend/public/fonts/hack-bold.woff
new file mode 100644
index 0000000..368b913
Binary files /dev/null and b/frontend/public/fonts/hack-bold.woff differ
diff --git a/frontend/public/fonts/hack-bold.woff2 b/frontend/public/fonts/hack-bold.woff2
new file mode 100644
index 0000000..1155477
Binary files /dev/null and b/frontend/public/fonts/hack-bold.woff2 differ
diff --git a/frontend/public/fonts/hack-bolditalic.woff b/frontend/public/fonts/hack-bolditalic.woff
new file mode 100644
index 0000000..ce87fe2
Binary files /dev/null and b/frontend/public/fonts/hack-bolditalic.woff differ
diff --git a/frontend/public/fonts/hack-italic.woff b/frontend/public/fonts/hack-italic.woff
new file mode 100644
index 0000000..bd545e4
Binary files /dev/null and b/frontend/public/fonts/hack-italic.woff differ
diff --git a/frontend/public/fonts/hack-italic.woff2 b/frontend/public/fonts/hack-italic.woff2
new file mode 100644
index 0000000..1e7630c
Binary files /dev/null and b/frontend/public/fonts/hack-italic.woff2 differ
diff --git a/frontend/public/fonts/hack-regular.woff b/frontend/public/fonts/hack-regular.woff
new file mode 100644
index 0000000..e835381
Binary files /dev/null and b/frontend/public/fonts/hack-regular.woff differ
diff --git a/frontend/public/fonts/hack-regular.woff2 b/frontend/public/fonts/hack-regular.woff2
new file mode 100644
index 0000000..524465c
Binary files /dev/null and b/frontend/public/fonts/hack-regular.woff2 differ
diff --git a/frontend/public/index.html b/frontend/public/index.html
index b68a507..8fed5a7 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -20,10 +20,6 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Gitbase Playground</title>
-
-    <!-- TODO @carlosms download and serve fonts from our server -->
-    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
-    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/hack-font@3/build/web/hack.css">
   </head>
   <body>
     <noscript>
diff --git a/frontend/src/App.less b/frontend/src/App.less
index c1a5c33..0f70ea0 100644
--- a/frontend/src/App.less
+++ b/frontend/src/App.less
@@ -1,4 +1,5 @@
 @import './variables.less';
+@import './fonts.less';
 
 html,
 body,
@@ -89,7 +90,7 @@ body {
 
         &:before {
             display: block;
-            content: "●\A●\A●";
+            content: '●\A●\A●';
             white-space: pre;
             text-align: center;
             line-height: 1em;
@@ -178,6 +179,6 @@ body {
     }
 
     .uast-item.hovered {
-        background-color: fade(@secondary, 7%)
+        background-color: fade(@secondary, 7%);
     }
 }
diff --git a/frontend/src/fonts.less b/frontend/src/fonts.less
new file mode 100644
index 0000000..900401e
--- /dev/null
+++ b/frontend/src/fonts.less
@@ -0,0 +1,118 @@
+/*!
+ *  Hack typeface https://github.com/source-foundry/Hack
+ *  License: https://github.com/source-foundry/Hack/blob/master/LICENSE.md
+ */
+/* FONT PATHS
+ * -------------------------- */
+@font-face {
+    font-family: 'Hack';
+    src: url('/fonts/hack-regular.woff2') format('woff2'),
+        url('/fonts/hack-regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Hack';
+    src: url('/fonts/hack-bold.woff2') format('woff2'),
+        url('/fonts/hack-bold.woff') format('woff');
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Hack';
+    src: url('/fonts/hack-italic.woff2') format('woff2'),
+        url('/fonts/hack-italic.woff') format('woff');
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Hack';
+    src: url('/fonts/hack-bolditalic.woff2') format('woff2'),
+        url('/fonts/hack-bolditalic.woff') format('woff');
+    font-weight: 700;
+    font-style: italic;
+}
+
+/*!
+ *  Source Sans Pro typeface https://fonts.google.com/specimen/Source+Sans+Pro
+ *  License: http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL_web
+ */
+/* FONT PATHS
+ * -------------------------- */
+
+/* cyrillic-ext */
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
+        url(/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lujVj9_mf.woff2)
+            format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+        U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
+        url(/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lujVj9_mf.woff2)
+            format('woff2');
+    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
+        url(/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lujVj9_mf.woff2)
+            format('woff2');
+    unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
+        url(/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lujVj9_mf.woff2)
+            format('woff2');
+    unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
+        url(/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lujVj9_mf.woff2)
+            format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
+        url(/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lujVj9_mf.woff2)
+            format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
+        url(/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7lujVj9w.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+        U+2215, U+FEFF, U+FFFD;
+}