Fix flag emoji font

Windows is silly and doesn't include flag emojis: #72 This should fix that by using Flag emojis from the Noto Color Emoji font. https://stackoverflow.com/questions/62729729/how-do-i-view-country-flags-on-windows-10-through-html/70021892#70021892 While I'm at it, clean up a couple CSS font rules.
kas-catholic · Jun 17, 2023 · ea1e2c0 · ea1e2c0
1 parent 78024f6
commit ea1e2c0
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git 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
@@ -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;