google noto serif TC font family

package.json

@@ -12,6 +12,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@remotion/cli": "3.3.78",
+    "@remotion/google-fonts": "^3.3.78",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "remotion": "3.3.78"
@@ -25,4 +26,4 @@
     "typescript": "^4.9.4"
   },
   "packageManager": "yarn@1.22.19"
-}
+}

src/VerticalText.tsx

@@ -7,6 +7,8 @@ import {
 	interpolate,
 } from 'remotion';
 
+import {loadFont} from '@remotion/google-fonts/NotoSerifTC';
+
 type Props = {
 	text: string;
 	fontSize?: number;
@@ -26,6 +28,7 @@ const VerticalText: React.FC<Props> = ({
 	y,
 	disappear,
 }) => {
+	const {fontFamily} = loadFont('normal', {weights: ['400']});
 	const current = useCurrentFrame();
 	const textArray = Array.from(text);
 	const currentEndIndex = interpolate(
@@ -52,6 +55,7 @@ const VerticalText: React.FC<Props> = ({
 				from={from}
 				durationInFrames={disappear ? disappear - from : 4096}
 				style={{
+					fontFamily,
 					top: `${1080 - y}px`,
 					left: x,
 					width: 'min-content',
@@ -63,7 +67,7 @@ const VerticalText: React.FC<Props> = ({
 					overflow: 'hidden',
 				}}
 			>
-				{textArray.slice(0, currentEndIndex).map((char, index) => (
+				{textArray.slice(0, currentEndIndex).map((char) => (
 					<div
 						style={{
 							width: 'min-content',

yarn.lock

@@ -308,6 +308,13 @@
   dependencies:
     "@typescript-eslint/utils" "5.19.0"
 
+"@remotion/google-fonts@^3.3.78":
+  version "3.3.78"
+  resolved "https://registry.npmmirror.com/@remotion/google-fonts/-/google-fonts-3.3.78.tgz#276c17b1b81c786e0af770d5d4423e4607ca8737"
+  integrity sha512-BThLomOoe/MX2jF+G897yBK60xx9MpVg/D1/d3oUGgpeNGgaWyRafVqdoxYA7Mz9u1L41pFxxk08OJIKLszh0g==
+  dependencies:
+    remotion "3.3.78"
+
 "@remotion/media-utils@3.3.78":
   version "3.3.78"
   resolved "https://registry.npmmirror.com/@remotion/media-utils/-/media-utils-3.3.78.tgz#e7a2f22a184fdd2871126f4b2f90657b10069ba2"