diff --git a/assets/fonts.css b/assets/fonts.css
index 8241ff6b..1c2cf48d 100644
--- a/assets/fonts.css
+++ b/assets/fonts.css
@@ -48,25 +48,6 @@
   font-size: 1.5rem;
 }
 
-@font-face {
-  font-family: 'Gentium Book Basic';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/fonts/GentiumBookBasic.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-  font-family: 'Gentium Book Basic';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/fonts/GentiumBookBasic.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
 
 /* cyrillic-ext */
 @font-face {
diff --git a/components/app/Appbar.vue b/components/app/Appbar.vue
index 77a20543..c91311c4 100644
--- a/components/app/Appbar.vue
+++ b/components/app/Appbar.vue
@@ -10,7 +10,7 @@
       <div v-if="user && currentLibrary">
         <div class="pl-1.5 pr-2.5 py-2 bg-bg bg-opacity-30 rounded-md flex items-center" @click="clickShowLibraryModal">
           <ui-library-icon :icon="currentLibraryIcon" :size="4" font-size="base" />
-          <p class="text-sm font-book leading-4 ml-2 mt-0.5 max-w-24 truncate">{{ currentLibraryName }}</p>
+          <p class="text-smleading-4 ml-2 mt-0.5 max-w-24 truncate">{{ currentLibraryName }}</p>
         </div>
       </div>
 
diff --git a/components/bookshelf/Shelf.vue b/components/bookshelf/Shelf.vue
index a95b30f2..367850fc 100644
--- a/components/bookshelf/Shelf.vue
+++ b/components/bookshelf/Shelf.vue
@@ -13,7 +13,7 @@
       </template>
     </div>
 
-    <div v-if="!altViewEnabled" class="absolute text-center categoryPlacard font-book transform z-30 bottom-0.5 left-4 md:left-8 w-36 rounded-md" style="height: 18px">
+    <div v-if="!altViewEnabled" class="absolute text-center categoryPlacardtransform z-30 bottom-0.5 left-4 md:left-8 w-36 rounded-md" style="height: 18px">
       <div class="w-full h-full flex items-center justify-center rounded-sm border shinyBlack">
         <p class="transform text-xs">{{ label }}</p>
       </div>
diff --git a/components/cards/LazyBookCard.vue b/components/cards/LazyBookCard.vue
index 789ee884..e6b6176f 100644
--- a/components/cards/LazyBookCard.vue
+++ b/components/cards/LazyBookCard.vue
@@ -18,7 +18,7 @@
 
     <div class="w-full h-full absolute top-0 left-0 rounded overflow-hidden z-10">
       <div v-show="libraryItem && !imageReady" class="absolute top-0 left-0 w-full h-full flex items-center justify-center" :style="{ padding: sizeMultiplier * 0.5 + 'rem' }">
-        <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }" class="font-book text-gray-300 text-center">{{ title }}</p>
+        <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }" class="text-gray-300 text-center">{{ title }}</p>
       </div>
 
       <img v-show="libraryItem" ref="cover" :src="bookCoverSrc" class="w-full h-full transition-opacity duration-300" :class="showCoverBg ? 'object-contain' : 'object-fill'" @load="imageLoaded" :style="{ opacity: imageReady ? 1 : 0 }" />
@@ -26,11 +26,11 @@
       <!-- Placeholder Cover Title & Author -->
       <div v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem' }">
         <div>
-          <p class="text-center font-book" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">{{ titleCleaned }}</p>
+          <p class="text-center" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">{{ titleCleaned }}</p>
         </div>
       </div>
       <div v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem', bottom: authorBottom + 'rem' }">
-        <p class="text-center font-book" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
+        <p class="text-center" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
       </div>
     </div>
 
diff --git a/components/cards/LazyCollectionCard.vue b/components/cards/LazyCollectionCard.vue
index f76d0540..85e6b5b2 100644
--- a/components/cards/LazyCollectionCard.vue
+++ b/components/cards/LazyCollectionCard.vue
@@ -5,7 +5,7 @@
       <covers-collection-cover ref="cover" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
     </div>
 
-    <div class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md font-book text-center" :style="{ width: Math.min(240, width) + 'px' }">
+    <div class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-mdtext-center" :style="{ width: Math.min(240, width) + 'px' }">
       <div class="w-full h-full flex items-center justify-center rounded-sm border" :class="isAltViewEnabled ? 'altBookshelfLabel' : 'shinyBlack'" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
         <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
       </div>
diff --git a/components/cards/LazyPlaylistCard.vue b/components/cards/LazyPlaylistCard.vue
index b3a1d18a..44448f70 100644
--- a/components/cards/LazyPlaylistCard.vue
+++ b/components/cards/LazyPlaylistCard.vue
@@ -4,7 +4,7 @@
     <div class="w-full h-full bg-primary relative rounded overflow-hidden">
       <covers-playlist-cover ref="cover" :items="items" :width="width" :height="height" />
     </div>
-    <div class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md font-book text-center" :style="{ width: Math.min(160, width) + 'px' }">
+    <div class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-mdtext-center" :style="{ width: Math.min(160, width) + 'px' }">
       <div class="w-full h-full flex items-center justify-center rounded-sm border" :class="isAltViewEnabled ? 'altBookshelfLabel' : 'shinyBlack'" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
         <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
       </div>
diff --git a/components/cards/LazySeriesCard.vue b/components/cards/LazySeriesCard.vue
index f19aa574..7fdd4548 100644
--- a/components/cards/LazySeriesCard.vue
+++ b/components/cards/LazySeriesCard.vue
@@ -8,7 +8,7 @@
     <div v-if="isAltViewEnabled && isCategorized" class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
       <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
     </div>
-    <div v-if="!isCategorized" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md font-book text-center" :style="{ width: Math.min(240, width) + 'px' }">
+    <div v-if="!isCategorized" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-mdtext-center" :style="{ width: Math.min(240, width) + 'px' }">
       <div class="w-full h-full flex items-center justify-center rounded-sm border" :class="isAltViewEnabled ? 'altBookshelfLabel' : 'shinyBlack'" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
         <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
       </div>
diff --git a/components/covers/BookCover.vue b/components/covers/BookCover.vue
index d1f5ee7e..4f4c6238 100644
--- a/components/covers/BookCover.vue
+++ b/components/covers/BookCover.vue
@@ -8,7 +8,7 @@
       <img v-if="fullCoverUrl" ref="cover" :src="fullCoverUrl" loading="lazy" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0 z-10 duration-300 transition-opacity" :style="{ opacity: imageReady ? 1 : 0 }" :class="(showCoverBg && hasCover) || noBg ? 'object-contain' : 'object-fill'" />
 
       <div v-show="loading && libraryItem" class="absolute top-0 left-0 h-full w-full flex items-center justify-center">
-        <p class="font-book text-center" :style="{ fontSize: 0.75 * sizeMultiplier + 'rem' }">{{ title }}</p>
+        <p class="text-center" :style="{ fontSize: 0.75 * sizeMultiplier + 'rem' }">{{ title }}</p>
         <div class="absolute top-2 right-2">
           <widgets-loading-spinner />
         </div>
@@ -18,17 +18,17 @@
     <div v-if="imageFailed" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-red-100" :style="{ padding: placeholderCoverPadding + 'rem' }">
       <div class="w-full h-full border-2 border-error flex flex-col items-center justify-center">
         <img src="/Logo.png" loading="lazy" class="mb-2" :style="{ height: 64 * sizeMultiplier + 'px' }" />
-        <p class="text-center font-book text-error" :style="{ fontSize: titleFontSize + 'rem' }">Invalid Cover</p>
+        <p class="text-centertext-error" :style="{ fontSize: titleFontSize + 'rem' }">Invalid Cover</p>
       </div>
     </div>
 
     <div v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center z-10" :style="{ padding: placeholderCoverPadding + 'rem' }">
       <div>
-        <p class="text-center font-book truncate leading-none origin-center" style="color: rgb(247 223 187); font-size: 0.8rem" :style="{ transform: `scale(${sizeMultiplier})` }">{{ titleCleaned }}</p>
+        <p class="text-centertruncate leading-none origin-center" style="color: rgb(247 223 187); font-size: 0.8rem" :style="{ transform: `scale(${sizeMultiplier})` }">{{ titleCleaned }}</p>
       </div>
     </div>
     <div v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center z-10" :style="{ padding: placeholderCoverPadding + 'rem', bottom: authorBottom + 'rem' }">
-      <p class="text-center font-book truncate leading-none origin-center" style="color: rgb(247 223 187); opacity: 0.75; font-size: 0.6rem" :style="{ transform: `scale(${sizeMultiplier})` }">{{ authorCleaned }}</p>
+      <p class="text-centertruncate leading-none origin-center" style="color: rgb(247 223 187); opacity: 0.75; font-size: 0.6rem" :style="{ transform: `scale(${sizeMultiplier})` }">{{ authorCleaned }}</p>
     </div>
   </div>
 </template>
diff --git a/components/covers/CollectionCover.vue b/components/covers/CollectionCover.vue
index 403024eb..879bddad 100644
--- a/components/covers/CollectionCover.vue
+++ b/components/covers/CollectionCover.vue
@@ -15,7 +15,7 @@
     <div v-else class="relative w-full h-full flex items-center justify-center p-2 bg-primary rounded-sm">
       <div class="absolute top-0 left-0 w-full h-full bg-gray-400 bg-opacity-5" />
 
-      <p class="font-book text-white text-opacity-60 text-center" :style="{ fontSize: Math.min(1, sizeMultiplier) + 'rem' }">Empty Collection</p>
+      <p class="text-white text-opacity-60 text-center" :style="{ fontSize: Math.min(1, sizeMultiplier) + 'rem' }">Empty Collection</p>
     </div>
   </div>
 </template>
diff --git a/components/covers/GroupCover.vue b/components/covers/GroupCover.vue
index 8af50fd0..d173b7fc 100644
--- a/components/covers/GroupCover.vue
+++ b/components/covers/GroupCover.vue
@@ -134,7 +134,7 @@ export default {
 
       var innerP = document.createElement('p')
       innerP.textContent = this.name
-      innerP.className = 'text-sm font-book text-white'
+      innerP.className = 'text-smtext-white'
       imgdiv.appendChild(innerP)
 
       return imgdiv
diff --git a/components/covers/PreviewCover.vue b/components/covers/PreviewCover.vue
index fac0271a..aab610de 100644
--- a/components/covers/PreviewCover.vue
+++ b/components/covers/PreviewCover.vue
@@ -14,7 +14,7 @@
     <div v-if="imageFailed" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-red-100" :style="{ padding: placeholderCoverPadding + 'rem' }">
       <div class="w-full h-full border-2 border-error flex flex-col items-center justify-center">
         <img src="/Logo.png" class="mb-2" :style="{ height: 64 * sizeMultiplier + 'px' }" />
-        <p class="text-center font-book text-error" :style="{ fontSize: sizeMultiplier + 'rem' }">Invalid Cover</p>
+        <p class="text-centertext-error" :style="{ fontSize: sizeMultiplier + 'rem' }">Invalid Cover</p>
       </div>
     </div>
 
diff --git a/components/home/BookshelfToolbar.vue b/components/home/BookshelfToolbar.vue
index 63c0d2ec..148bc71a 100644
--- a/components/home/BookshelfToolbar.vue
+++ b/components/home/BookshelfToolbar.vue
@@ -5,8 +5,8 @@
         <nuxt-link to="/bookshelf/series" v-if="selectedSeriesName" class="pt-1">
           <span class="material-icons">arrow_back</span>
         </nuxt-link>
-        <p v-show="!selectedSeriesName" class="font-book pt-1">{{ totalEntities }} {{ entityTitle }}</p>
-        <p v-show="selectedSeriesName" class="ml-2 font-book pt-1">{{ selectedSeriesName }} ({{ totalEntities }})</p>
+        <p v-show="!selectedSeriesName" class="pt-1">{{ totalEntities }} {{ entityTitle }}</p>
+        <p v-show="selectedSeriesName" class="ml-2pt-1">{{ selectedSeriesName }} ({{ totalEntities }})</p>
         <div class="flex-grow" />
         <span v-if="page == 'library' || seriesBookPage" class="material-icons px-2" @click="changeView">{{ !bookshelfListView ? 'view_list' : 'grid_view' }}</span>
         <template v-if="page === 'library'">
diff --git a/components/stats/DailyListeningChart.vue b/components/stats/DailyListeningChart.vue
index 131534ca..ffbe653a 100644
--- a/components/stats/DailyListeningChart.vue
+++ b/components/stats/DailyListeningChart.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="w-96 my-6 mx-auto">
-    <h1 class="text-2xl mb-4 font-book">Minutes Listening <span class="text-white text-opacity-60 text-lg">(Last 7 days)</span></h1>
+    <h1 class="text-2xl mb-4">Minutes Listening <span class="text-white text-opacity-60 text-lg">(Last 7 days)</span></h1>
     <div class="relative w-96 h-72">
       <div class="absolute top-0 left-0">
         <template v-for="lbl in yAxisLabels">
@@ -25,7 +25,7 @@
       <div class="absolute -bottom-2 left-0 flex ml-6">
         <template v-for="dayObj in last7Days">
           <div :key="dayObj.date" :style="{ width: daySpacing + daySpacing / 14 + 'px' }">
-            <p class="text-sm font-book">{{ dayObj.dayOfWeek.slice(0, 3) }}</p>
+            <p class="text-sm">{{ dayObj.dayOfWeek.slice(0, 3) }}</p>
           </div>
         </template>
       </div>
diff --git a/pages/account.vue b/pages/account.vue
index 39d9b1d3..6d9dad9a 100644
--- a/pages/account.vue
+++ b/pages/account.vue
@@ -7,7 +7,7 @@
     <ui-btn color="primary flex items-center justify-between gap-2 ml-auto text-base mt-8" @click="logout">Logout<span class="material-icons" style="font-size: 1.1rem">logout</span></ui-btn>
 
     <div class="flex justify-end items-center m-4 gap-3 right-0 bottom-0 absolute">
-      <p class="text-sm font-book text-yellow-400 text-right">Report bugs, request features, provide feedback, and contribute on <a class="underline" href="https://github.com/advplyr/audiobookshelf-app" target="_blank">GitHub</a></p>
+      <p class="text-smtext-yellow-400 text-right">Report bugs, request features, provide feedback, and contribute on <a class="underline" href="https://github.com/advplyr/audiobookshelf-app" target="_blank">GitHub</a></p>
       <a href="https://github.com/advplyr/audiobookshelf-app" target="_blank" class="text-white hover:text-gray-200 hover:scale-150 hover:rotate-6 transform duration-500">
         <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 24 24">
           <path
diff --git a/pages/connect.vue b/pages/connect.vue
index f53a2e93..0f98c9d3 100644
--- a/pages/connect.vue
+++ b/pages/connect.vue
@@ -6,9 +6,9 @@
       </nuxt-link>
       <div class="absolute top-0 left-0 w-full p-6 flex items-center flex-col justify-center z-0 short:hidden">
         <img src="/Logo.png" class="h-20 w-20 mb-2" />
-        <h1 class="text-2xl font-book">audiobookshelf</h1>
+        <h1 class="text-2xl">audiobookshelf</h1>
       </div>
-      <p class="hidden absolute short:block top-1.5 left-12 p-2 font-book text-xl">audiobookshelf</p>
+      <p class="hidden absolute short:block top-1.5 left-12 p-2text-xl">audiobookshelf</p>
 
       <!-- <p class="absolute bottom-16 left-0 right-0 px-2 text-center text-error"><strong>Important!</strong> This app requires that you are running <u>your own server</u> and does not provide any content.</p> -->
 
diff --git a/pages/localMedia/item/_id.vue b/pages/localMedia/item/_id.vue
index 8104efae..9b4b9a5f 100644
--- a/pages/localMedia/item/_id.vue
+++ b/pages/localMedia/item/_id.vue
@@ -2,7 +2,7 @@
   <div class="w-full h-full py-6 px-2">
     <div v-if="localLibraryItem" class="w-full h-full" :class="orderChanged ? 'pb-20' : ''">
       <div class="px-2 flex items-center mb-2">
-        <p class="text-base font-book font-semibold">{{ mediaMetadata.title }}</p>
+        <p class="text-basefont-semibold">{{ mediaMetadata.title }}</p>
         <div class="flex-grow" />
 
         <button v-if="audioTracks.length && !isPodcast" class="shadow-sm text-accent flex items-center justify-center rounded-full mx-2" @click.stop="play">
diff --git a/pages/stats.vue b/pages/stats.vue
index bb337d84..2319aed8 100644
--- a/pages/stats.vue
+++ b/pages/stats.vue
@@ -8,21 +8,21 @@
       <div class="flex p-2">
         <div class="px-3">
           <p class="text-4xl md:text-5xl font-bold">{{ userItemsFinished.length }}</p>
-          <p class="font-book text-xs md:text-sm text-white text-opacity-80">Items Finished</p>
+          <p class="text-xs md:text-sm text-white text-opacity-80">Items Finished</p>
         </div>
       </div>
 
       <div class="flex p-2">
         <div class="px-1">
           <p class="text-4xl md:text-5xl font-bold">{{ totalDaysListened }}</p>
-          <p class="font-book text-xs md:text-sm text-white text-opacity-80">Days Listened</p>
+          <p class="text-xs md:text-sm text-white text-opacity-80">Days Listened</p>
         </div>
       </div>
 
       <div class="flex p-2">
         <div class="px-1">
           <p class="text-4xl md:text-5xl font-bold">{{ totalMinutesListening }}</p>
-          <p class="font-book text-xs md:text-sm text-white text-opacity-80">Minutes Listening</p>
+          <p class="text-xs md:text-sm text-white text-opacity-80">Minutes Listening</p>
         </div>
       </div>
     </div>
@@ -30,16 +30,16 @@
       <stats-daily-listening-chart :listening-stats="listeningStats" class="lg:scale-100 transform scale-90 px-0" />
       <div class="w-80 my-6 mx-auto">
         <div class="flex mb-4 items-center">
-          <h1 class="text-2xl font-book">Recent Sessions</h1>
+          <h1 class="text-2xl">Recent Sessions</h1>
           <div class="flex-grow" />
         </div>
         <p v-if="!mostRecentListeningSessions.length">No Listening Sessions</p>
         <template v-for="(item, index) in mostRecentListeningSessions">
           <div :key="item.id" class="w-full py-0.5">
             <div class="flex items-center mb-1">
-              <p class="text-sm font-book text-white text-opacity-70 w-8">{{ index + 1 }}.&nbsp;</p>
+              <p class="text-smtext-white text-opacity-70 w-8">{{ index + 1 }}.&nbsp;</p>
               <div class="w-56">
-                <p class="text-sm font-book text-white text-opacity-80 truncate">{{ item.mediaMetadata ? item.mediaMetadata.title : '' }}</p>
+                <p class="text-smtext-white text-opacity-80 truncate">{{ item.mediaMetadata ? item.mediaMetadata.title : '' }}</p>
                 <p class="text-xs text-white text-opacity-50">{{ $dateDistanceFromNow(item.updatedAt) }}</p>
               </div>
               <div class="flex-grow" />
diff --git a/static/fonts/GentiumBookBasic.woff2 b/static/fonts/GentiumBookBasic.woff2
deleted file mode 100644
index 5f82fd9a..00000000
Binary files a/static/fonts/GentiumBookBasic.woff2 and /dev/null differ
diff --git a/tailwind.config.js b/tailwind.config.js
index 90182ed4..3a2d32cb 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -33,8 +33,7 @@ module.exports = {
       },
       fontFamily: {
         sans: ['Source Sans Pro', ...defaultTheme.fontFamily.sans],
-        mono: ['Ubuntu Mono', ...defaultTheme.fontFamily.mono],
-        book: ['Gentium Book Basic', 'serif']
+        mono: ['Ubuntu Mono', ...defaultTheme.fontFamily.mono]
       },
       fontSize: {
         xxs: '0.625rem'