title: Chrome update suddenly breaks @font-face
body: <p>I'm trying to use @font-face to replace instances of a font. This has usually worked for me:</p>
  
  <pre><code>@font-face {
      font-family: 'Arial';
      font-weight: bold;
      font-style: italic;
      src: local('Times New Roman');
  }
  
  @font-face {
      font-family: 'Arial';
      font-weight: bold;
      src: local('Times New Roman');
  }
  
  @font-face {
      font-family: 'Arial';
      font-style: italic;
      src: local('Times New Roman');
  }
  
  @font-face {
      font-family: 'Arial';
      src: local('Times New Roman');
  }
  </code></pre>
  
  <p>With the end result being instances of Arial being replaced with Times New Roman. In fact, this works on a separate computer running Windows 10 and Chrome 61.0.3163.100.</p>
  
  <p>However, after a recent update to 62.0.3202.62, Arial is still replaced with Times New Roman, but bold and italics no longer work. Trying to reference something like "Times New Roman Bold" doesn't work and just defaults back to Arial. Placing <code>!important</code> after the bold and italic src lines gives faux-bold and faux-italics.</p>
  
  <p>Was the old behaviour wrong? What is the proper way to replace a font through CSS, if that is even possible?</p>