title: Apply custom font to Unicode range while preserving font of characters outside range
body: <p>My goal is to apply a custom font that I have to a range of Unicode characters (Chinese in this case), <em>and have the remaining characters retain their font</em>.</p>
  <p>Via this Stack Overflow question: <a href="https://stackoverflow.com/questions/45705472/how-to-apply-font-face-only-to-a-certain-range-of-unicode-characters">How to apply font-face only to a certain range of Unicode characters</a> and looking at the source code of <a href="https://chrome.google.com/webstore/detail/force-custom-fonts/hckjchjpkmbihoocajjpjajkggbccgee?hl=en&amp;authuser=1" rel="nofollow noreferrer">this</a> Chrome extension that forces custom fonts, I was able to create the below CSS code. The code is to be inserted as <code>&lt;style&gt;</code> element contents above the <code>&lt;head&gt;</code> of a webpage.</p>
  <pre class="lang-css prettyprint-override"><code>@font-face {
    font-style: normal;
    font-family: &quot;李国夫手写体&quot;;
    src: local(&quot;李国夫手写体&quot;);
    unicode-range: U+2E80-9FFF, U+F900-FAFF, U+FE30-FE4F, U+20000-2FA1F;
  }
  @font-face {
    font-style: bolder;
    font-family: &quot;李国夫手写体&quot;;
    src: local(&quot;李国夫手写体&quot;);
    unicode-range: U+2E80-9FFF, U+F900-FAFF, U+FE30-FE4F, U+20000-2FA1F;
  }
  :not(pre):not(code):not(textarea):not(tt):not(kbd):not(samp):not(var) {
    font-family: &quot;李国夫手写体&quot; !important;
  }
  </code></pre>
  <p>This does indeed change the fonts in the range to my custom one. However, it also sets all the fonts used by other characters outside the range to a default value.</p>
  <p>Before:
  <a href="https://i.stack.imgur.com/gJL5t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gJL5t.png" alt="before image" /></a></p>
  <p>After：
  <a href="https://i.stack.imgur.com/D0T2J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D0T2J.png" alt="after image" /></a></p>
  <p>*Here the difference in English fonts is not super clear, but there are changes if you look closely at the font. The difference is however significant with different size/custom/fancy fonts — see below image.</p>
  <p><a href="https://i.stack.imgur.com/Z6XIf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z6XIf.png" alt="Big difference" /></a></p>
  <p><strong>Is there any way of applying a custom font to only characters in some range without affecting other characters?</strong></p>