diff --git a/demo/react-app/src/App.css b/demo/react-app/src/App.css
index db3df90..49f61dd 100644
--- a/demo/react-app/src/App.css
+++ b/demo/react-app/src/App.css
@@ -1,7 +1,36 @@
-div {
-  font: 1.2em "Poppins", sans-serif;
+p {
+  font-size: x-large;
 }
 
-p {
+.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;
+}
diff --git a/demo/react-app/src/App.tsx b/demo/react-app/src/App.tsx
index b76bb18..efdffb5 100644
--- a/demo/react-app/src/App.tsx
+++ b/demo/react-app/src/App.tsx
@@ -3,9 +3,22 @@ import './App.css';
 function App() {
   return (
     <div>
-      <h1>Google provider</h1>
-      <div>Poppins</div>
-      <p>Press Start 2P</p>
+      <h1>Google</h1>
+      <p className="poppins">Poppins</p>
+      <p className="press-start">Press Start 2P</p>
+
+      <h1>Bunny</h1>
+      <p className="bunny-aclonica">Aclonica</p>
+      <p className="bunny-allan">Allan</p>
+
+      <h1>FontShare</h1>
+      <p className="font-share-panchang">Panchang</p>
+
+      <h1>FontSource</h1>
+      <p className="font-source-luckiest">Luckiest</p>
+
+      <h1>Local</h1>
+      <p className="local">Local font</p>
     </div>
   );
 }
diff --git a/demo/react-app/src/black-fox.ttf b/demo/react-app/src/black-fox.ttf
new file mode 100644
index 0000000..9497048
Binary files /dev/null and b/demo/react-app/src/black-fox.ttf differ