I don’t think your
@font-face code is specified properly. Each @font-face should only represent a single typeface as a src (though it may include that typeface in different file formats for browser compatibility). Also the
font-family within the
@font-face should only have a single name - this is what will be used to refer to it in the
font-family fallback list.
I’d also not use the display name of “Avenir”, since this is a default font included within Hype.
Here’s what mine looks like:
Since you have three different typefaces, I would recommend three different custom css fonts. Also note that depending on your target, you may need the font files themselves to be in different formats for the src property (separated by commas).