Avenir Next Condensed on iPad shows up as Italics

I'm trying to use the Avenir Next Condensed font at a weight 100 (so very light). It works fine on all browsers I've tried apart from iOS where it shows up as italics. Any ideas how to fix this?

Here's a test page, when viewed on an iPad (or the iPad simulator) the text is in italics.

<html>
  <style>
    div {
      font-family: 'Avenir Next Condensed';
      font-weight: 100;
      font-style: normal;
    }
  </style>
  <div>Why is this italic?</div>
</html>

Solution

There's no font on iOS called "Avenir Next Condensed", there are however fonts named "AvenirNextCondensed-Italic" and "AvenirNextCondensed-UltraLight" amongst others. When you specify a font that doesn't exist it tries to fuzzy match against the fonts it has but it doesn't always get it right. Easy fix is just to specify the correct font: "AvenirNextCondensed-UltraLight" in this case.

There's a list of fonts available on iOS here: http://iosfonts.com/