React i18next
I am using two languages English and Arabic in my project I am using i18next react i want to use two different fonts for Arabic and English i want to use DIN Next LT for Arabic and Arial, Helvetica, sans-serif for English
2 Answers
Add a new class in the CSS file. and conditionaly render that class based on the language selected. Use Dynamic styling.
const { t, i18n } = useTranslation();
<div classname={i18n.language === 'en' ? 'english-class': 'other-language'}></div>
You can get the current language by accessing i18next.resolvedLanguage https://www.i18next.com/overview/api#resolvedlanguage
So based on that information you can use a different font.
Related