title: How do I specify that "bold" should be "Avenir Heavy" not "Avenir Black"?
body: <p>I need to send HTML-formatted email using the Avenir font (if it's present in the OS). Two of this font's weights are Heavy and Black (the latter being the heaviest weight). I want mail clients to use Avenir Heavy for bold text, but they're using Avenir Black instead.</p>
  
  <p>In my HTML I have a <code>&lt;style type="text/css"&gt;</code> tag with:</p>
  
  <pre><code>body {
      font-family: Avenir, Helvetica, Arial, sans-serif;
  }
  .font_h1 {
      font-weight: bold;
  }
  </code></pre>
  
  <p>When I open my HTML file in a desktop browser (Firefox, Chrome, or Safari), it uses Avenir Heavy as the bold font. But when I email it and view it in Mac Outlook 2016 or in iOS 10's Mail client, those display the bold font with Avenir Black, which is a much heavier font. Same thing happens if I specify the <code>font-weight</code> as <code>bolder</code>.</p>
  
  <p>Oddly, if I say:</p>
  
  <pre><code>body {
      font-family: Avenir Heavy;
  }
  </code></pre>
  
  <p>then the page is still rendered by desktop browsers with Avenir Medium, with Avenir Heavy used for bold.</p>
  
  <p>I don't think that <code>@font-face</code> is my answer, because I'm not loading a font from a URL.</p>
  
  <p>How can I tell the browser or mail client to specifically use Avenir Heavy as the bold weight?</p>