Fix Symbol Font Issues

hkilang · Jun 5, 2024 · b4cef05 · b4cef05
1 parent 9b2112c
commit b4cef05
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git a/public/index.html b/public/index.html
@@ -11,9 +11,7 @@
 		<link rel="manifest" href="./site.webmanifest" />
 		<link rel="mask-icon" href="./assets/safari-pinned-tab.svg" color="#f5ad3b" />
 		<meta name="theme-color" content="#f1ede3" />
-		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&text=▶⏸⏹🛈&display=swap" />
 	</head>
 	<body>
 		<div id="root"></div>
@@ -22,7 +20,7 @@
 				<form method="dialog">
 					<button type="submit" class="btn btn-ghost w-14 h-14 min-h-14 text-[2.5rem] absolute right-3 top-3 text-slate-500 hover:bg-opacity-10" aria-label="關閉">╳</button>
 				</form>
-				<h3 class="mx-6 mt-6 mb-[1.125rem]"><span class="font-symbol">🛈</span> 關於</h3>
+				<h3 class="mx-6 mt-6 mb-[1.125rem]"><span class="font-symbol font-normal mr-2">🛈</span>關於</h3>
 				<hr />
 				<div class="overflow-y-auto">
 					<p>歡迎使用<b>香港本土語言文字轉語音（Text-to-Speech）朗讀器</b>！</p>

diff --git a/src/App.tsx b/src/App.tsx
@@ -29,7 +29,7 @@ export default function App() {
 						   max-sm:text-xl max-sm:font-normal max-sm:relative max-sm:left-4
 						   sm:btn-lg sm:text-[1.375rem] sm:leading-[1.875rem] sm:text-slate-500 sm:col-start-2 sm:row-start-1 sm:row-end-3"
 				onClick={() => (document.getElementById("about-dialog") as HTMLDialogElement).showModal()}>
-				<span className="font-symbol">🛈</span> 關於
+				<span className="font-symbol font-normal">🛈</span>關於
 			</button>
 		</div>
 		<div>

diff --git a/src/index.css b/src/index.css
@@ -9,6 +9,12 @@
 			font-size: 16px;
 		}
 	}
+	@font-face {
+		font-family: "Noto Sans Symbols 2";
+		font-display: swap;
+		src: url("https://fonts.gstatic.com/l/font?kit=I_uyMoGduATTei9eI8daxVHDyfisHr71ypbydJR7WOGXo6nZf0eLJkc&skey=5cf84917987cc637&v=v23") format("woff2");
+		descent-override: 25%;
+	}
 	:root {
 		--btn-text-case: none;
 		@apply bg-base-200;

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -31,7 +31,7 @@ export default {
 			symbol: [
 				"-apple-system",
 				"BlinkMacSystemFont",
-				"Noto Sans Symbols 2",
+				'"Noto Sans Symbols 2"',
 				"Segoe UI Symbol",
 				"sans-serif",
 			],