diff --git a/src/components/FontChange.vue b/src/components/FontChange.vue
index 944385e..7e529bc 100644
--- a/src/components/FontChange.vue
+++ b/src/components/FontChange.vue
@@ -5,16 +5,19 @@ import { useUserRepoStore } from "../modules/repo/store/userRepo.store"
 const store = useUserRepoStore()
 
 const fontFamilies = computed(() => store.userSettings?.fontFamilies ?? [])
+const sortedFontFamilies = computed(() =>
+  [...fontFamilies.value].sort((a, b) => a.localeCompare(b)),
+)
 </script>
 
 <template>
   <select
-    v-if="fontFamilies.length > 0"
+    v-if="sortedFontFamilies.length > 0"
     class="select select-sm"
     :value="store.userSettings?.chosenFontFamily"
     @change="store.setFontFamily(($event.target as HTMLSelectElement).value)"
   >
-    <option v-for="font in fontFamilies" :key="font" :value="font">
+    <option v-for="font in sortedFontFamilies" :key="font" :value="font">
       {{ font }}
     </option>
   </select>