Apply Poppins font

src/assets/scss/main.scss

@@ -7,6 +7,8 @@
   font-display: swap;
 }
 
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
+
 blockquote {
   @apply border-l;
   @apply border-l-4;
@@ -23,10 +25,6 @@ body {
   font-family: "Roboto", sans-serif;
 }
 
-body h2 {
-  font-family: "Roboto", sans-serif;
-}
-
 h1 {
   font-family: "Roboto", sans-serif;
 }
@@ -35,10 +33,6 @@ body {
   padding-top: 60px;
 }
 
-body p {
-  font-family: "Roboto", sans-serif;
-}
-
 .act-link {
   @apply bg-gray-300;
 }

src/components/PostListItem.vue

@@ -21,7 +21,20 @@
             v-for="membership in record.memberships"
             :key="membership.id"
             :to="membership.path"
-            class="text-xs bg-transparent hover:text-blue-700 py-1 px-2 mr-1 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full mb-2"
+            class="
+              text-xs
+              bg-transparent
+              hover:text-blue-700
+              py-1
+              px-2
+              mr-1
+              border
+              hover:border-blue-500
+              border-gray-600
+              text-gray-700
+              rounded-full
+              mb-2
+            "
             >{{ membership.title }}</g-link
           >
         </section>
@@ -41,7 +54,13 @@
                     <g-image
                       :src="author.image"
                       :alt="author.name"
-                      class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"
+                      class="
+                        w-8
+                        h-8
+                        rounded-full
+                        bg-gray-200
+                        border-2 border-white
+                      "
                     />
                   </g-link>
                 </li>
@@ -66,12 +85,27 @@
               </p>
             </div>
           </div>
-          <section class="post-tags container mx-auto relative py-3" v-if="displaytags()">
+          <section
+            class="post-tags container mx-auto relative py-3"
+            v-if="displaytags()"
+          >
             <g-link
               v-for="tag in record.tags"
               :key="tag.id"
               :to="tag.path"
-              class="text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full"
+              class="
+                text-xs
+                bg-transparent
+                hover:text-blue-700
+                py-2
+                px-4
+                mr-2
+                border
+                hover:border-blue-500
+                border-gray-600
+                text-gray-700
+                rounded-full
+              "
               >{{ tag.title }}</g-link
             >
           </section>
@@ -93,10 +127,10 @@ export default {
   },
   methods: {
     displaytags() {
-      return this.showtags
+      return this.showtags;
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
 <style scoped>

src/templates/BlogPost.vue

@@ -24,7 +24,15 @@
                     <g-image
                       :src="author.image"
                       :alt="author.name"
-                      class="h-8 w-8 sm:h-10 sm:w-10 rounded-full bg-gray-200 border-2 border-white"
+                      class="
+                        h-8
+                        w-8
+                        sm:h-10
+                        sm:w-10
+                        rounded-full
+                        bg-gray-200
+                        border-2 border-white
+                      "
                     />
                   </g-link>
                 </li>
@@ -70,7 +78,14 @@
 
       <div class="py-12">
         <section
-          class="post-content container mx-auto relative font-serif text-gray-700"
+          class="
+            post-content
+            container
+            mx-auto
+            relative
+            font-serif
+            text-gray-700
+          "
         >
           <div
             class="post-content-text text-xl"
@@ -83,7 +98,19 @@
             v-for="tag in $page.blog.tags"
             :key="tag.id"
             :to="tag.path"
-            class="text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full"
+            class="
+              text-xs
+              bg-transparent
+              hover:text-blue-700
+              py-2
+              px-4
+              mr-2
+              border
+              hover:border-blue-500
+              border-gray-600
+              text-gray-700
+              rounded-full
+            "
             >{{ tag.title }}</g-link
           >
         </section>
@@ -167,16 +194,12 @@
         path
       }
     }
-
-
-    
   }
 </page-query>
 
 <script>
 import PostListItem from "~/components/custom/Cards/PostListItem.vue";
 
-
 export default {
   components: {
     PostListItem,
@@ -186,15 +209,14 @@ export default {
       title: this.$page.blog.title,
     };
   },
-
 };
 </script>
 
 <style scoped>
-@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
 .post-card-excerpt,
-.post-content-text {
+.post-content-text,
-  font-family: "Roboto", sans-serif !important;
+.post-content-text h2 {
-  line-height: 1.2;
+  font-family: "Poppins", sans-serif !important;
+  line-height: 1.5;
 }
 </style>

src/templates/NewsPost.vue

@@ -186,10 +186,10 @@ export default {
 </script>
 
 <style scoped>
-@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
 .post-card-excerpt,
-.post-content-text {
+.post-content-text,
-  font-family: "Roboto", sans-serif !important;
+.post-content-text h2 {
-  line-height: 1.2;
+  font-family: "Poppins", sans-serif !important;
+  line-height: 1.5;
 }
 </style>

src/templates/Person.vue

@@ -221,3 +221,12 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.post-card-excerpt,
+.post-content-text,
+.post-content-text h2 {
+  font-family: "Poppins", sans-serif !important;
+  line-height: 1.5;
+}
+</style>