From 972e40f3ab4ce144a2e6309f3f737bc0f9698aac Mon Sep 17 00:00:00 2001
From: heimoshuiyu <heimoshuiyu@gmail.com>
Date: Thu, 23 Mar 2023 18:17:40 +0800
Subject: [PATCH] google noto serif TC font family

---
 package.json         | 3 ++-
 src/VerticalText.tsx | 6 +++++-
 yarn.lock            | 7 +++++++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 47dad0a..cf8aa09 100644
--- a/package.json
+++ b/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"
-}
\ No newline at end of file
+}
diff --git a/src/VerticalText.tsx b/src/VerticalText.tsx
index 253a3a9..a688660 100644
--- a/src/VerticalText.tsx
+++ b/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',
diff --git a/yarn.lock b/yarn.lock
index 6141ff7..b53a82d 100644
--- a/yarn.lock
+++ b/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"