diff --git a/src/lib/components/Button.js b/src/lib/components/Button.js
index db9090e281f7653ba3675db4b55cf95b052efec7..c0b019d91ab0aea8192e5303bea694c5fd0ad4bc 100644
--- a/src/lib/components/Button.js
+++ b/src/lib/components/Button.js
@@ -12,6 +12,7 @@ const button = theme
     transition: t.transitions.toggle,
     shadow: t.shadows.button,
     selected: t.colors.secondary,
+    font: t.fonts.main,
   }))
   .createSelector()
 
@@ -36,6 +37,8 @@ const StyledColorableShape = styled(Colorable)`
   min-height: ${unit(2)};
   height: ${({ size, height }) => (!height ? unit(size || 1) : height)};
   transition: transform 0.2s ${button('transition')};
+  font-family: ${button('font')};
+  text-transform: lowercase;
 
   /* make sure outline is not displayed */
   ::-moz-focus-inner {
diff --git a/tests/__snapshots__/storyshots.test.js.snap b/tests/__snapshots__/storyshots.test.js.snap
index 9702818daa6faf34f0bac60b3d3c9d9aa3ca8951..d3a0624d42b3189a274f394867581c82f1896ad6 100644
--- a/tests/__snapshots__/storyshots.test.js.snap
+++ b/tests/__snapshots__/storyshots.test.js.snap
@@ -18,14 +18,14 @@ exports[`Storyshots Atom/Buttons Button 1`] = `
           className="sc-kAzzGY fVDftC"
         >
           <button
-            className="sc-gzVnrw cMOBSY sc-bZQynM ikemTa"
+            className="sc-gzVnrw joNAhJ sc-bZQynM ikemTa"
             size={2}
             width="240px"
           >
             beauftragen
           </button>
           <button
-            className="sc-gzVnrw bQUxic sc-bZQynM fKhqhr"
+            className="sc-gzVnrw fQJuEj sc-bZQynM fKhqhr"
             disabled={true}
             size={2}
             value="inaktiv"
@@ -1085,35 +1085,35 @@ exports[`Storyshots Atom/Buttons Button/sizing 1`] = `
           >
             width
             <button
-              className="sc-gzVnrw ezhOgr sc-bZQynM ikemTa"
+              className="sc-gzVnrw fZeeBx sc-bZQynM ikemTa"
               size={2}
               width="400px"
             >
                width = 400px 
             </button>
             <button
-              className="sc-gzVnrw dltDCx sc-bZQynM ikemTa"
+              className="sc-gzVnrw cGPjbQ sc-bZQynM ikemTa"
               size={2}
               width="200px"
             >
                width = 200px 
             </button>
             <button
-              className="sc-gzVnrw rinPx sc-bZQynM ikemTa"
+              className="sc-gzVnrw fytYWi sc-bZQynM ikemTa"
               size={2}
               width="12em"
             >
                width = 12em 
             </button>
             <button
-              className="sc-gzVnrw dRmBfp sc-bZQynM ikemTa"
+              className="sc-gzVnrw eHpuaR sc-bZQynM ikemTa"
               size={2}
               width="20em"
             >
                width = 20em 
             </button>
             <button
-              className="sc-gzVnrw dRmBfp sc-bZQynM ikemTa"
+              className="sc-gzVnrw eHpuaR sc-bZQynM ikemTa"
               size={2}
               width="20em"
             >
@@ -1129,28 +1129,28 @@ exports[`Storyshots Atom/Buttons Button/sizing 1`] = `
           >
             size
             <button
-              className="sc-gzVnrw chIGvd sc-bZQynM ikemTa"
+              className="sc-gzVnrw lkCSYb sc-bZQynM ikemTa"
               size={1}
               width="240px"
             >
                size = 1 
             </button>
             <button
-              className="sc-gzVnrw cMOBSY sc-bZQynM ikemTa"
+              className="sc-gzVnrw joNAhJ sc-bZQynM ikemTa"
               size={2}
               width="240px"
             >
                size = 2 
             </button>
             <button
-              className="sc-gzVnrw kFcbgh sc-bZQynM ikemTa"
+              className="sc-gzVnrw iCmQYf sc-bZQynM ikemTa"
               size={3}
               width="240px"
             >
                size = 3 
             </button>
             <button
-              className="sc-gzVnrw dyRVks sc-bZQynM ikemTa"
+              className="sc-gzVnrw jViumF sc-bZQynM ikemTa"
               size={4}
               width="240px"
             >
@@ -3083,14 +3083,14 @@ exports[`Storyshots Atom/Buttons Button/states 1`] = `
           className="sc-kAzzGY fVDftC"
         >
           <button
-            className="sc-gzVnrw cMOBSY sc-bZQynM ikemTa"
+            className="sc-gzVnrw joNAhJ sc-bZQynM ikemTa"
             size={2}
             width="240px"
           >
             plain
           </button>
           <button
-            className="sc-gzVnrw joHYDB sc-bZQynM ikemTa"
+            className="sc-gzVnrw fYgEHE sc-bZQynM ikemTa"
             selected={true}
             size={2}
             width="240px"
@@ -3098,14 +3098,14 @@ exports[`Storyshots Atom/Buttons Button/states 1`] = `
             selected
           </button>
           <button
-            className="sc-gzVnrw cMOBSY sc-bZQynM iHiYTA"
+            className="sc-gzVnrw joNAhJ sc-bZQynM iHiYTA"
             size={2}
             width="240px"
           >
             danger
           </button>
           <button
-            className="sc-gzVnrw bQUxic sc-bZQynM fKhqhr"
+            className="sc-gzVnrw fQJuEj sc-bZQynM fKhqhr"
             disabled={true}
             size={2}
             width="240px"