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.
In my HTML I have a <style type="text/css">
tag with:
body {
font-family: Avenir, Helvetica, Arial, sans-serif;
}
.font_h1 {
font-weight: bold;
}
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 font-weight
as bolder
.
Oddly, if I say:
body {
font-family: Avenir Heavy;
}
then the page is still rendered by desktop browsers with Avenir Medium, with Avenir Heavy used for bold.
I don't think that @font-face
is my answer, because I'm not loading a font from a URL.
How can I tell the browser or mail client to specifically use Avenir Heavy as the bold weight?