fix: language selector not showing emojis on windows (and probably macOS)

This commit is contained in:
2023-09-17 20:44:22 +02:00
parent 3d7161e5af
commit 3301b99308
4 changed files with 10 additions and 11 deletions

View File

@@ -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>

View File

@@ -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);
}

View File

@@ -1,3 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');
.languageSelector {
position: absolute;
top: 15px;

View File

@@ -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>