diff --git a/demo/vue-app/src/App.vue b/demo/vue-app/src/App.vue
index d498f9f..fa6d219 100644
--- a/demo/vue-app/src/App.vue
+++ b/demo/vue-app/src/App.vue
@@ -1,24 +1,59 @@
-<script setup lang="ts">
-</script>
-
 <template>
   <div>
-    <h1>Google provider</h1>
-    <div>
-      Poppins
-    </div>
-    <p>
-      Press Start 2P
-    </p>
+    <h1>Google</h1>
+    <p class="poppins">Poppins</p>
+    <p class="press-start">Press Start 2P</p>
+
+    <h1>Bunny</h1>
+    <p class="bunny-aclonica">Aclonica</p>
+    <p class="bunny-allan">Allan</p>
+
+    <h1>FontShare</h1>
+    <p class="font-share-panchang">Panchang</p>
+
+    <h1>FontSource</h1>
+    <p class="font-source-luckiest">Luckiest</p>
+
+    <h1>Local</h1>
+    <p class="local">Local font</p>
   </div>
 </template>
 
 <style scoped>
-div {
-  font: 1.2em 'Poppins', sans-serif;
+p {
+  font-size: x-large;
 }
 
-p {
-  font-family: 'Press Start 2P', sans-serif;
+.google-poppins {
+  font-family: "Poppins", sans-serif;
+}
+
+.google-press-start {
+  font-family: "Press Start 2P", sans-serif;
+}
+
+.bunny-aclonica {
+  font-family: "Aclonica", sans-serif;
+}
+
+.bunny-allan {
+  font-family: "Allan", sans-serif;
+}
+
+.font-share-panchang {
+  font-family: "Panchang", sans-serif;
+}
+
+.font-source-luckiest {
+  font-family: "Luckiest Guy", sans-serif;
+}
+
+@font-face {
+  font-family: "Black Fox";
+  src: url("./black-fox.ttf");
+}
+
+.local {
+  font-family: "Black Fox", sans-serif;
 }
 </style>
diff --git a/demo/vue-app/src/black-fox.ttf b/demo/vue-app/src/black-fox.ttf
new file mode 100644
index 0000000..9497048
Binary files /dev/null and b/demo/vue-app/src/black-fox.ttf differ