diff --git a/webapp/src/components/kanban/kanbanCard.scss b/webapp/src/components/kanban/kanbanCard.scss
index a55f36d03..4f66c33fa 100644
--- a/webapp/src/components/kanban/kanbanCard.scss
+++ b/webapp/src/components/kanban/kanbanCard.scss
@@ -8,7 +8,7 @@
 
     border-radius: 3px;
     margin-bottom: 10px;
-    padding: 8px 16px;
+    padding: 12px 16px;
     box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0px 0px 0px 1px,
         rgba(var(--center-channel-color-rgb), 0.1) 0px 2px 4px;
 
@@ -46,11 +46,13 @@
 
     .octo-icontitle {
         flex: 1 1 auto;
-        font-weight: 500;
+        font-weight: 600;
+        line-height: 20px;
+        margin-bottom: 8px;
 
         .octo-icon {
             font-size: 16px;
-            margin-right: 5px;
+            margin-right: 8px;
         }
     }
     .IconButton {
diff --git a/webapp/src/fonts/metropolis/Metropolis-Light.woff2 b/webapp/src/fonts/metropolis/Metropolis-Light.woff2
new file mode 100644
index 000000000..f0ff6f346
Binary files /dev/null and b/webapp/src/fonts/metropolis/Metropolis-Light.woff2 differ
diff --git a/webapp/src/fonts/metropolis/Metropolis-LightItalic.woff2 b/webapp/src/fonts/metropolis/Metropolis-LightItalic.woff2
new file mode 100644
index 000000000..3cbcc3464
Binary files /dev/null and b/webapp/src/fonts/metropolis/Metropolis-LightItalic.woff2 differ
diff --git a/webapp/src/fonts/metropolis/Metropolis-Regular.woff2 b/webapp/src/fonts/metropolis/Metropolis-Regular.woff2
new file mode 100644
index 000000000..f50bf3422
Binary files /dev/null and b/webapp/src/fonts/metropolis/Metropolis-Regular.woff2 differ
diff --git a/webapp/src/fonts/metropolis/Metropolis-RegularItalic.woff2 b/webapp/src/fonts/metropolis/Metropolis-RegularItalic.woff2
new file mode 100644
index 000000000..93de25882
Binary files /dev/null and b/webapp/src/fonts/metropolis/Metropolis-RegularItalic.woff2 differ
diff --git a/webapp/src/fonts/metropolis/Metropolis-SemiBold.woff2 b/webapp/src/fonts/metropolis/Metropolis-SemiBold.woff2
new file mode 100644
index 000000000..fad6dfdec
Binary files /dev/null and b/webapp/src/fonts/metropolis/Metropolis-SemiBold.woff2 differ
diff --git a/webapp/src/fonts/metropolis/Metropolis-SemiBoldItalic.woff2 b/webapp/src/fonts/metropolis/Metropolis-SemiBoldItalic.woff2
new file mode 100644
index 000000000..ad97ed0cd
Binary files /dev/null and b/webapp/src/fonts/metropolis/Metropolis-SemiBoldItalic.woff2 differ
diff --git a/webapp/src/styles/compass-icons.scss b/webapp/src/styles/_compass-icons.scss
similarity index 100%
rename from webapp/src/styles/compass-icons.scss
rename to webapp/src/styles/_compass-icons.scss
diff --git a/webapp/src/styles/_typography.scss b/webapp/src/styles/_typography.scss
new file mode 100644
index 000000000..728e94f9a
--- /dev/null
+++ b/webapp/src/styles/_typography.scss
@@ -0,0 +1,64 @@
+h1,
+h2,
+h3,
+.title {
+    font-family: Metropolis, sans-serif;
+    font-weight: 600;
+}
+
+.focalboard-body {
+    .title {
+        font-size: 40px;
+        line-height: 40px;
+        margin: 0 0 10px 0;
+    }
+}
+
+h1 {
+    font-size: 40px;
+    line-height: 40px;
+    margin: 0 0 10px 0;
+}
+
+// Metropolis font definitions
+@font-face {
+    font-family: 'Metropolis';
+    font-style: normal;
+    font-weight: 600;
+    src: url('../fonts/metropolis/Metropolis-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Metropolis';
+    font-style: italic;
+    font-weight: 600;
+    src: url('../fonts/metropolis/Metropolis-SemiBoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Metropolis';
+    font-style: normal;
+    font-weight: 400;
+    src: url('../fonts/metropolis/Metropolis-Regular.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Metropolis';
+    font-style: italic;
+    font-weight: 400;
+    src: url('../fonts/metropolis/Metropolis-RegularItalic.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Metropolis';
+    font-style: normal;
+    font-weight: 300;
+    src: url('../fonts/metropolis/Metropolis-Light.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Metropolis';
+    font-style: italic;
+    font-weight: 300;
+    src: url('../fonts/metropolis/Metropolis-LightItalic.woff2') format('woff2');
+}
diff --git a/webapp/src/styles/main.scss b/webapp/src/styles/main.scss
index 7cceaffc1..f395d40c5 100644
--- a/webapp/src/styles/main.scss
+++ b/webapp/src/styles/main.scss
@@ -1,4 +1,6 @@
-@import "compass-icons";
+@import "_compass-icons";
+@import "_typography";
+
 html {
     height: 100%;
 }
@@ -20,18 +22,6 @@ html {
 }
 
 .focalboard-body {
-    @font-face {
-        font-family: 'compass-icons';
-        src: url('../fonts/compass-icons/compass-icons.eot?45182295');
-        src: url('../fonts/compass-icons/compass-icons.eot?45182295#iefix') format('embedded-opentype'),
-        url('../fonts/compass-icons/compass-icons.woff2?45182295') format('woff2'),
-        url('../fonts/compass-icons/compass-icons.woff?45182295') format('woff'),
-        url('../fonts/compass-icons/compass-icons.ttf?45182295') format('truetype'),
-        url('../fonts/compass-icons/compass-icons.svg?45182295#compass-icons') format('svg');
-        font-weight: normal;
-        font-style: normal;
-    }
-
     * {
         box-sizing: border-box;
         outline: 0;
@@ -103,14 +93,6 @@ html {
         margin: 50px auto;
     }
 
-    .title,
-    h1 {
-        font-size: 40px;
-        line-height: 40px;
-        margin: 0 0 10px 0;
-        font-weight: 600;
-    }
-
     /* App frame */
 
     #root {
@@ -144,7 +126,7 @@ html {
     .octo-icon {
         font-family: "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji,
             "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols;
-        line-height: 1.5em;
+        line-height: 1.2;
         align-self: baseline;
         overflow: visible;
     }
@@ -160,8 +142,9 @@ html {
     /*-- Property list --*/
 
     .octo-propertyvalue {
+        font-size: 12px;
         color: rgb(var(--center-channel-color-rgb));
-        padding: 0 5px;
+
         &.empty {
             color: rgba(var(--center-channel-color-rgb), 0.4);
         }