diff --git a/web/index.html b/web/index.html
index 45d294e..bf11631 100644
--- a/web/index.html
+++ b/web/index.html
@@ -6,6 +6,7 @@
     <title>Soundboard</title>
     <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
+    <link rel="preload" href="https://fonts.gstatic.com/s/notoemoji/v41/emoji.ttf" as="font" type="font/ttf" crossorigin>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
     <script type="module" src="/src/main.tsx"></script>
   </head>
diff --git a/web/src/styles.css b/web/src/styles.css
index aa147e8..34185e1 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -453,8 +453,9 @@ header p {
   max-height: 260px; overflow: auto; background: #0f1530; border:1px solid rgba(255,255,255,.28); border-radius: 12px;
   box-shadow: 0 24px 48px rgba(0,0,0,.6);
   z-index: 300000;
+  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", system-ui, sans-serif;
 }
-.emoji-picker button { background: transparent; border: 0; font-size: 1.25rem; cursor: pointer; }
+.emoji-picker button { background: transparent; border: 0; font-size: 1.35rem; line-height: 1.35rem; cursor: pointer; font-family: inherit; }
 .emoji-picker button:hover { filter: brightness(1.2); }
 .select-item {
   width: 100%; text-align: left; padding: 10px 12px; color: #e7e7ee;