Add lato font in styled-components way

src/App.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import styled from 'styled-components';
+import styled, { injectGlobal } from 'styled-components';
 import TopBar from './components/TopBar';
 import WorkshopForm from './components/WorkshopForm';
 import Header from './components/Header';
@@ -26,4 +26,13 @@ const Main = styled.main`
     }
 `;
 
+/* eslint no-unused-expressions: 0 */
+injectGlobal`
+  @import url('https://fonts.googleapis.com/css?family=Lato');
+
+  body {
+    font-family: 'Lato', Sans-Serif;
+  }
+`;
+
 export default App;

src/components/Header.js

@@ -7,7 +7,7 @@ class Header extends Component {
     render() {
         return (
             <Section>
-                <Text type="primary">Stwórz Workshop!</Text>
+                <Text type='header'>Stwórz Workshop!</Text>
                 <Text>
                     Scratch the furniture i like big cats and i can not lie.
                     Making sure that fluff gets into the owner's eyes ask for

src/components/Text.js

@@ -29,7 +29,13 @@ const style = {
     default: {
         fontSize: '12',
         color: Colors.grey
-    }
+    },
+    header: {
+        fontFamily: 'Lato sans-serif',
+        fontSize: '35',
+        fontWeight: 'bold',
+        color: '#464646'
+    },
 };
 
 const StyledText = styled.p`

src/styles/Colors.js

@@ -3,7 +3,7 @@ const Colors = {
     black: '#000',
     red: '#F7302F',
     yellow: '#FAE452',
-    grey: '#aaa',
+    grey: '#464646',
 };
 
 export default Colors;