From ba7069e99a20e43da2d82406054901cc30a4cc9e Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Mon, 28 Sep 2020 01:49:30 +0100
Subject: [PATCH] Add custom font families

---
 public/index.html         | 2 ++
 src/App.vue               | 8 ++++----
 src/components/navbar.vue | 4 ++--
 tailwind.config.js        | 4 ++++
 4 files changed, 12 insertions(+), 6 deletions(-)
diff --git a/public/index.html b/public/index.html
index 4123528..831a6f0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700;900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index 03363d2..b89bab4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" class="text-black">
+  <div id="app" class="font-display text-black">
     <navbar :name="title" />
 
     <div class="h-48 flex items-center justify-center bg-yellow">
@@ -21,7 +21,7 @@
             <div class="space-y-2">
               <h2 class="text-lg font-bold text-center">About</h2>
 
-              <p class="text-sm leading-relaxed">Since May 2012 we've held monthly JavaScript talks. Today the group is over 800 members strong and has a great friendly community that we've been proud to see grow.</p>
+              <p class="font-body text-center text-sm leading-relaxed">Since May 2012 we've held monthly JavaScript talks. Today the group is over 800 members strong and has a great friendly community that we've been proud to see grow.</p>
             </div>
 
             <div>
@@ -36,7 +36,7 @@
             <div class="space-y-2">
               <h2 class="text-lg font-bold text-center">Format</h2>
 
-              <p class="text-sm leading-relaxed">Talk nights are usually held on the last Wednesday of every month. They usual consist of two main talks and occasionally lightning talks that can be on any topic.</p>
+              <p class="font-body text-center text-sm leading-relaxed">Talk nights are usually held on the last Wednesday of every month. They usual consist of two main talks and occasionally lightning talks that can be on any topic.</p>
             </div>
 
             <div>
@@ -51,7 +51,7 @@
             <div class="space-y-2">
               <h2 class="text-lg font-bold text-center">Fancy speaking?</h2>
 
-              <p class="text-sm leading-relaxed">Bristol JS is only as strong as it's speakers so we're always on the lookout for great talks. Drop us an <a href="#0">e-mail</a> with an outline of your talk as well as your availability, if it's right for us we'll get you booked in.</p>
+              <p class="font-body text-center text-sm leading-relaxed">Bristol JS is only as strong as it's speakers so we're always on the lookout for great talks. Drop us an <a href="#0">e-mail</a> with an outline of your talk as well as your availability, if it's right for us we'll get you booked in.</p>
             </div>
 
             <div>
diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index dcdb3fa..9ced39f 100644
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@@ -3,7 +3,7 @@
     <div class="max-w-6xl mx-auto py-6 px-4">
         <div class="flex justify-between">
           <div class="w-1/2 flex items-center">
-            <a class="text-white font-bold" href="#" v-text="name"></a>
+            <a class="text-white font-black" href="#" v-text="name"></a>
           </div>
 
           <div class="w-1/2 flex justify-end md:hidden">
@@ -25,7 +25,7 @@
           <nav class="hidden space-x-6 md:block">
             <a
               class="
-                text-xs font-bold uppercase
+                font-body text-xs font-bold uppercase
                 hover:text-yellow
                 focus:text-yellow
               "
diff --git a/tailwind.config.js b/tailwind.config.js
index 2c1338a..ba6bef9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -23,6 +23,10 @@ module.exports = {
       white: '#fff',
       yellow: '#fde546'
     },
+    fontFamily: {
+      display: ['Raleway'],
+      body: ['Lato']
+    },
     extend: {},
   },
   variants: {},
