Merge pull request #7 from sern-handler/fix/locale-emojis

fix: language selector not showing emojis on windows
sern-handler · Sep 17, 2023 · 8199672 · 8199672
2 parents 3d7161e + 3301b99
commit 8199672
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,9 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.css b/src/App.css
@@ -1,11 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
 
-/* @font-face {
-	font-family: 'Classic Console Neue';
-	src: local('Classic Console Neue'),
-		url('https://fonts.srizan.dev/clacon2.ttf') format('truetype');
-} */
-
 .titleHeader {
 	color: #4af626;
 	font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
@@ -17,6 +11,5 @@
 	gap: 30px;
 	padding: 20px;
 	align-items: center;
-	display: 'grid';
 	grid-template-columns: repeat(2, 1fr);
 }
diff --git a/src/LanguageSelector.css b/src/LanguageSelector.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');
+
 .languageSelector {
     position: absolute;
     top: 15px;

diff --git a/src/LanguageSelector.tsx b/src/LanguageSelector.tsx
@@ -25,12 +25,13 @@ export default function LanguageSelector() {
 						height: '40px',
 						textAlign: 'center',
 						// this fixes a little text selection gap that appears in a
-						// few pixels outside the outer part of the selection "square"
-						cursor: 'pointer'
+						// few pixels outside the outer part of the selection outline
+						cursor: 'pointer',
+						fontFamily: 'Noto Color Emoji'
 					}}
 				>
-					<MenuItem value={'en'} className={'menuItems'}>🇺🇸</MenuItem>
-					<MenuItem value={'es'} className={'menuItems'}>🇪🇸</MenuItem>
+					<MenuItem value={'en'} className={'menuItems'} sx={{ fontFamily: 'Noto Color Emoji' }}>🇺🇸</MenuItem>
+					<MenuItem value={'es'} className={'menuItems'} sx={{ fontFamily: 'Noto Color Emoji' }}>🇪🇸</MenuItem>
 				</Select>
 			</FormControl>
 		</div>