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

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.

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?

10

2 Answers

I declare Avenir like this:

@font-face { font-family: 'Avenir'; font-weight: 300; font-style: normal; src: local('Avenir Book'), local('Avenir-300'), url('../../assets/fonts/Avenir-Book/Avenir-Book.eot') format('embedded-opentype'), url('../../assets/fonts/Avenir-Book/Avenir-Book.woff') format('woff'), url('../../assets/fonts/Avenir-Book/Avenir-Book.ttf') format('truetype'); } @font-face { font-family: 'Avenir'; font-weight: 500; font-style: normal; src: local('Avenir Medium'), local('Avenir-500'), url('../../assets/fonts/Avenir-Medium/Avenir-Medium.eot') format('embedded-opentype'), url('../../assets/fonts/Avenir-Medium/Avenir-Medium.woff') format('woff'), url('../../assets/fonts/Avenir-Medium/Avenir-Medium.ttf') format('truetype'); } @font-face { font-family: 'Avenir'; font-weight: 700; font-style: normal; src: local('Avenir Heavy'), local('Avenir-700'), url('../../assets/fonts/Avenir-Heavy/Avenir-Heavy.eot') format('embedded-opentype'), url('../../assets/fonts/Avenir-Heavy/Avenir-Heavy.woff') format('woff'), url('../../assets/fonts/Avenir-Heavy/Avenir-Heavy.ttf') format('truetype'); } @font-face { font-family: 'Avenir'; font-weight: 900; font-style: normal; src: local('Avenir Black'), local('Avenir-900'), url('../../assets/fonts/Avenir-Black/Avenir-Black.eot') format('embedded-opentype'), url('../../assets/fonts/Avenir-Black/Avenir-Black.woff') format('woff'), url('../../assets/fonts/Avenir-Black/Avenir-Black.ttf') format('truetype'); }

And then in CSS:

body { font-family: Avenir, Helvetica, Arial, sans-serif; } h1 { font-weight: 900; // black } h2 { font-weight: 700; // heavy } h3 { font-weight: 500; // medium } ...

I think you need to explicitly open the font (using a font processing app, such as fontforge) and check which family it belongs to. Then use that family name and you'll be home safe. Also, if you want to be precise about your weights, use numbered values such as

  • 400 for normal
  • 700 for bold
  • 900 for black
  • etc.

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJoa2ttZW2Bd36OoaawZZSkeqp50qmcnKGWrnq1tMCtZJunnJl6tLTOrqOdZZKaeqLCxKegq2WYmq63xYynpq1lkauyr7XRZpmlmZOg

 Share!