fix(website): prevent font substitution with tofu symbol (#911)

* fix(website): prevent font substitution with tofu symbol * fix: material icons don't support spaces which triggers tofu * fix: make all symbols spaceless for consistency
fontsource · Dec 10, 2023 · 4a8fcfc · 4a8fcfc
1 parent fb960b4
commit 4a8fcfc
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 4 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/app/components/preview/TextArea.tsx b/website/app/components/preview/TextArea.tsx
@@ -75,7 +75,7 @@ const TextBox = ({ family, weight, loaded }: TextBoxProps) => {
 						variant="unstyled"
 						styles={{
 							input: {
-								fontFamily: `"${family}"`,
+								fontFamily: `"${family}", "Fallback Outline"`,
 								fontWeight: weight,
 								fontSize: state.size,
 								color: state.color,

diff --git a/website/app/components/search/Hits.tsx b/website/app/components/search/Hits.tsx
@@ -57,7 +57,10 @@ const HitComponent = ({ hit, fontSize }: HitComponentProps) => {
 				href={`https://cdn.jsdelivr.net/fontsource/css/${hit.objectID}@latest/index.css`}
 			/>
 			<Skeleton visible={!isFontLoaded}>
-				<Text fz={fontSize} style={{ fontFamily: `"${hit.family}"` }}>
+				<Text
+					fz={fontSize}
+					style={{ fontFamily: `"${hit.family}", "Fallback Outline"` }}
+				>
 					{currentPreview}
 				</Text>
 			</Skeleton>

diff --git a/website/app/root.tsx b/website/app/root.tsx
@@ -1,5 +1,6 @@
 import '@fontsource-variable/inter/wght.css';
 import '@fontsource-variable/source-code-pro/wght.css';
+import 'fallback-font/fallback-outline.css';
 import '@mantine/core/styles.css';
 import './styles/global.css';
 

diff --git a/website/app/utils/language/language.ts b/website/app/utils/language/language.ts
@@ -13,13 +13,13 @@ export const getPreviewText = (subset: string, id?: string) => {
 		case 'material-icons-round':
 		case 'material-icons-sharp':
 		case 'material-icons-two-tone': {
-			return 'photo_camera thumb_up assignment create_new_folder insert_invitation drafts credit_card timer check_box close';
+			return 'photo_camerathumb_upassignmentcreate_new_folderinsert_invitationdraftscredit_cardtimercheck_boxclose';
 		}
 
 		case 'material-symbols-outlined':
 		case 'material-symbols-rounded':
 		case 'material-symbols-sharp': {
-			return 'search settings home person add shopping_cart favorite';
+			return 'searchsettingshomepersonaddshopping_cartcheck_circlefavoritelogouttrophy';
 		}
 
 		case 'yakuhanjp':

diff --git a/website/package.json b/website/package.json
@@ -28,6 +28,7 @@
 		"algoliasearch": "^4.20.0",
 		"clsx": "^2.0.0",
 		"esbuild": "^0.19.8",
+		"fallback-font": "^1.0.1",
 		"instantsearch.js": "^4.62.0",
 		"isbot": "^3.7.1",
 		"ky": "^1.1.3",