diff --git a/font/KHMenu.otf b/font/KHMenu.otf
new file mode 100644
index 0000000..1eba3fe
Binary files /dev/null and b/font/KHMenu.otf differ
diff --git a/index.html b/index.html
index c18bc3d..bf4a062 100644
--- a/index.html
+++ b/index.html
@@ -19,12 +19,11 @@
 
 <h3>Check out these custom web components below!</h3>
 
-
 <h4>Web Component 1</h4>
 <poots-poot>
 	
 	<h4 slot="keyblades">my favorite keyblades</h4>
-	<ul slot="list">
+	<ul slot="list" style="font-family: KHMenu;">
 
 		<li>
 		Kingdom Key
diff --git a/main.css b/main.css
index e69de29..e9c6001 100644
--- a/main.css
+++ b/main.css
@@ -0,0 +1,6 @@
+@font-face {
+    font-family: 'KHMenu';
+    src: url('font/KHMenu.otf') format('opentype');
+    font-weight: normal;
+    font-style: normal;
+}
\ No newline at end of file
diff --git a/poots.js b/poots.js
index 9df59a1..b1ad412 100644
--- a/poots.js
+++ b/poots.js
@@ -1,7 +1,31 @@
 const template = document.createElement('template')
 template.innerHTML = `
-    <div>
-    
+
+<style>
+    @font-face {
+    font-family: 'KHMenu';
+    src: url('font/KHMenu.otf') format('opentype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+    div {
+    border: 1px solid;
+    }
+    h2 {
+    font-family: KHMenu
+    }
+
+    :host {
+    background-color: purple
+    display: block;
+    }
+
+
+</style>
+
+<div>
+   
     <h2> WEPA! </h2>
     <slot name="keyblades">Default text is no slot used in html</slot>
     <slot name="list"> </slot>