Load fonts from CSS

src/ig-reel/IGSimpleScene.tsx

@@ -18,7 +18,6 @@ import { IGMediaRender } from './IGMediaRender';
 import { Group } from '../models/Types';
 import { VideoSplash } from '../anims/VideoSplash';
 import Transitions from '../../public/assets/transitions.json'
-import * as SubtitleFont from "@remotion/google-fonts/Roboto";
 
 export type DisplayMedia = SectionMedia &
 { idx: number, durationFrames: number, startFrame: number, endFrame: number, }
@@ -37,9 +36,6 @@ export const IGScene: React.FC<any> = (props: {
   const frame = useCurrentFrame();
   let speechPath = RenderUtils.getFileName(item?.audioFullPath)
 
-  let { fontFamily } = SubtitleFont.loadFont("normal", {
-    weights: ['900']
-  })
 
   useEffect(() => {
     const subFile = staticFile(RenderUtils.getFileName(audioCaptionFile))
@@ -247,7 +243,7 @@ export const IGScene: React.FC<any> = (props: {
               style={{
                 color: '#FFEB3B',
                 fontSize: '5em',
-                fontFamily: fontFamily,
+                fontFamily: 'Poppins',
                 borderColor: 'transparent',
                 borderRadius: '2rem',
                 borderLeftWidth: '4px',

src/style.css

@@ -1,6 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import url("https://fonts.googleapis.com/css2?family=Bangers");
+@import url('https://fonts.googleapis.com/css2?family=Lato&family=Montserrat:wght@700&family=Poppins:wght@400&display=swap');
 
 @keyframes springBackground {
   0%, 100% {

src/subtitles/excited_Subtitles.tsx

@@ -1,6 +1,5 @@
 //@ts-nocheck
 import React, { useEffect, useState } from 'react'
-import * as SubtitleFont from "@remotion/google-fonts/Montserrat";
 import { AbsoluteFill, Img, interpolate, interpolateColors, Series, spring, useCurrentFrame, useVideoConfig, random } from "remotion";
 import { Group, Word } from '../models/Types';
 import _, { words } from 'lodash'
@@ -11,10 +10,6 @@ import { RenderUtils } from '../RenderUtils';
 const ExcitedSubtitles: React.FC<{ group: Group, word: Word, position: 'start' | 'center' | 'end' }> = ({
   word, group }) => {
 
-  let { fontFamily } = SubtitleFont.loadFont("normal", {
-    weights: ['900']
-  })
-
   let frame = useCurrentFrame()
   let rotation = 0
   if (group && group.words) {
@@ -48,7 +43,7 @@ const ExcitedSubtitles: React.FC<{ group: Group, word: Word, position: 'start' |
         justifyContent: 'center',
         alignContent: 'center'
       }}
-        wordFont={fontFamily}
+        wordFont='Montserrat, sans-serif'
         getHighlightStyle={getHighlightStyle}
         word={word} group={group} position="end" />
     </div>

src/subtitles/general_Subtitles.tsx

@@ -113,7 +113,7 @@ const GeneralSubtitles: React.FC<{ group: Group, word: Word, position: 'start' |
                   key={index}
                   style={{
                     ...wordStyle,
-                    fontFamily: wordFont || fontFamily
+                    fontFamily: wordFont || 'Lato, sans-serif'
                   }}
                 >
                   {wordToDisplay?.toUpperCase()}