how to change font family when change locale (language in i18n) in next js

Question

I have a multi-language application and it will switch language via select input that toggle locale between 2 languages, on the other hand, I have 2 font-family that I want to toggle when the locale changed.

in _app.js

const {locale} = useRouter();
useEffect(() => {
  if(locale === "ur"){
    import("../styles/urdoFont.css");
  }else{
    import("../styles/persianFont.css");
  }
}, [locale]);

and in header component

<Link 
   href={{
      pathname: '/',
                    }}
      as={`/`}
      locale="fa"
 >
   <a>
     <Image
        src="/image/iran.svg"
        alt=""
        width="40"
        height="40"
     />
   </a>
 </Link>
 <Link 
      href={{
         pathname: '/ur',
      }}
      as={`/ur`}
      locale="ur"
    >
      <a>
        <Image
          src="/image/pakistan.svg"
          alt=""
          width="40"
          height="40"
        />
      </a>
 </Link>