title: How to define different fonts for different language using AngularJS i18n?
body: <p>I am using <a href="http://angular-translate.github.io/" rel="nofollow">Angular-i18n</a>. My page is like:</p>
  
  <pre><code>&lt;div translate="main.logged.message" translate-values="{username: '{{account.login}}'}"&gt;
  </code></pre>
  
  <p>I would like to use font-family <code>Lato</code> for English and <code>Microsoft Yahei</code> for Chinese. </p>
  
  <p>I have tried:</p>
  
  <pre><code>:lang(zh) {
      font-family: 'Microsoft Yahei';
  }
  </code></pre>
  
  <p>But it is not working. And also checked the Doc: <a href="http://angular-translate.github.io/docs/#/guide" rel="nofollow">http://angular-translate.github.io/docs/#/guide</a>. I cannot find the solution. </p>
  
  <p>How to make it?</p>
  
  <hr>
  
  <p>Update:</p>
  
  <p>I found a post <a href="http://yukikodesign.com/orangutangy/?p=191" rel="nofollow">http://yukikodesign.com/orangutangy/?p=191</a>, saying:</p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>It's like: <code>font-family: "Lato", "Microsoft Yahei";</code></p>
  
  <p>Surprisingly, it works! But it seems not a generic solution. Any better one?</p>