I have been working on an AngularJS application that needs to support three different languages, each requiring a different font. While using angular-translate for language translation, I encountered the challenge of changing the font dynamically based on the language selection. Initially, I used CSS variables to achieve this functionality by updating the variable value with the desired font-face name upon language change. Unfortunately, this approach did not work in Internet Explorer due to browser limitations. In my quest to find an alternative solution, I came across a helpful resource on how to change font-faces via JavaScript (source). The idea of defining multiple font-faces for different languages seemed promising. For example:
@font-face {
font-family: 'Regular';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url('../fonts/roboto-regular-webfont.woff2') format('woff2'), url('../fonts/roboto-regular-webfont.woff') format('woff');
font-display: block;
}