diff --git a/src/App.scss b/src/App.scss
index b669f96..eaf6d7f 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -9,7 +9,7 @@
 }
 
 .btn {
-  font-family: "Open Sans", sans-serif;
+  font-family: "NotoColorEmojiLimited", "Open Sans", sans-serif;
 }
 
 .navbar-brand {
@@ -38,7 +38,6 @@
  * This is required to make each column scroll independently. */
 .navbar {
   height: 4rem;
-  font-family: "Open Sans", sans-serif;
 }
 .column-container {
   height: calc(100% - 4rem);
diff --git a/src/index.scss b/src/index.scss
index c879439..ebddbf1 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -11,11 +11,14 @@ $mobile-breakpoint: 376px;
 // Import Swiper
 @import "swiper/css";
 
-* {
-  font-family: "EB Garamond", serif;
+@font-face {
+  font-family: NotoColorEmojiLimited;
+  unicode-range: U+1F1E6-1F1FF;
+  src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf);
 }
 
 body {
+  font-family: "NotoColorEmojiLimited", "EB Garamond", serif;
   margin: 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;