Quantcast
Channel: Active questions tagged email - Stack Overflow
Viewing all articles
Browse latest Browse all 30081

How do I specify that "bold" should be "Avenir Heavy" not "Avenir Black"?

$
0
0

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?


Viewing all articles
Browse latest Browse all 30081

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>