I am using Angular-i18n. My page is like:
<div translate="main.logged.message" translate-values="{username: '{{account.login}}'}">
Lato
Microsoft Yahei
:lang(zh) {
font-family: 'Microsoft Yahei';
}
Specify English fonts first and then the Chinese fonts in your font list. This makes it so English fonts render with your desired fonts then the Chinese fonts pick up the other characters.
font-family: "Lato", "Microsoft Yahei";
You can add a variable 'lang' to the rootscope and then set this variable by read your cookie or localstorage or by read the browser setting (whatever way you go). Based on this variable you can add your language class='{{lang}}' to the same element like your ng-app attribute. Then you can change your font based on this class. If you provide to change the language dynamically by a function using $translate.use then change also your varaiable 'lang' on rootscope and write the changes back to your persistence layer like cookie or localstorage.
app.controller('Ctrl', ['$translate', '$scope', '$rootScope',
function($translate, $scope, $rootScope) {
//better set this in your run function based
//on your cookie or localstorage
$rootScope.lang = "en";
$scope.changeLanguage = function(langKey) {
$translate.use(langKey);
$rootScope.lang = langKey;
//persist to cookie or localstorage here
};
}
]);