diff --git a/internal_packages/message-list/stylesheets/message-list.less b/internal_packages/message-list/stylesheets/message-list.less
index cdf8c4194..75c884701 100644
--- a/internal_packages/message-list/stylesheets/message-list.less
+++ b/internal_packages/message-list/stylesheets/message-list.less
@@ -256,7 +256,7 @@
   .message-header {
     position: relative;
     font-size: @font-size-small;
-    padding-bottom: @spacing-standard;
+    padding-bottom: 0;
     padding-top: 19px;
 
     &.pending {
@@ -370,7 +370,7 @@
       width: 100%;
       border: 0;
       padding: 0;
-      margin-top: @spacing-sub-double;
+      margin-top: 20px;
       overflow: auto;
     }
   }
diff --git a/internal_packages/preferences/lib/main.cjsx b/internal_packages/preferences/lib/main.cjsx
index c7d2591e3..ad2689c66 100644
--- a/internal_packages/preferences/lib/main.cjsx
+++ b/internal_packages/preferences/lib/main.cjsx
@@ -55,7 +55,7 @@ module.exports =
       width: 520
       resizable: false
       autosize: true
-      stylesheetRegex: /preferences/
+      stylesheetRegex: /(preferences|nylas\-fonts)/
       props: {
         initialTab: tab
       }
diff --git a/src/components/timeout-transition-group.cjsx b/src/components/timeout-transition-group.cjsx
index 9483f4840..d4d0b51a9 100644
--- a/src/components/timeout-transition-group.cjsx
+++ b/src/components/timeout-transition-group.cjsx
@@ -21,10 +21,12 @@ animationSupported = => true
 ###
 
 addClass = (element, className) =>
+  return unless element
   element.classList.add(className)
   element
 
 removeClass = (element, className) =>
+  return unless element
   if element.classList.contains(className)
     element.classList.remove(className)
   element
diff --git a/static/email-frame.less b/static/email-frame.less
index 5f4d7d15b..366b1d328 100644
--- a/static/email-frame.less
+++ b/static/email-frame.less
@@ -2,6 +2,51 @@
 @import 'ui-variables';
 
 .ignore-in-parent-frame {
+  // ----- Font Families -----
+  @font-face {
+    font-family: 'Nylas-Pro';
+    font-style: normal;
+    font-weight: 200;
+    src: url('nylas://nylas-private-fonts/fonts/Nylas-Pro-Thin.otf');
+  }
+
+  @font-face {
+    font-family: 'Nylas-Pro';
+    font-style: normal;
+    font-weight: 300;
+    src: url('nylas://nylas-private-fonts/fonts/Nylas-Pro-Blond.otf');
+  }
+
+  @font-face {
+    font-family: 'Nylas-Pro';
+    font-style: normal;
+    font-weight: 400;
+    src: url('nylas://nylas-private-fonts/fonts/Nylas-Pro-Normal.otf');
+  }
+
+  @font-face {
+    font-family: 'Nylas-Pro';
+    font-style: normal;
+    font-weight: 500;
+    src: url('nylas://nylas-private-fonts/fonts/Nylas-Pro-Medium.otf');
+  }
+
+  @font-face {
+    font-family: 'Nylas-Pro';
+    font-style: normal;
+    font-weight: 600;
+    src: url('nylas://nylas-private-fonts/fonts/Nylas-Pro-SemiBold.otf');
+  }
+
+  // Pro-SemiBold doesn't render emoji properly. Override the emjoi unicode
+  // block so that it uses the "Normal" weight even at font-weight:600.
+  @font-face {
+    font-family: 'Nylas-Pro';
+    font-style: normal;
+    font-weight: 600;
+    src: url('nylas://nylas-private-fonts/fonts/Nylas-Pro-Normal.otf'), Helvetica, sans-serif;
+    unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF;
+  }
 
   html, body {
     font-family: "Nylas-Pro", "Helvetica", "Lucidia Grande", sans-serif;