Question: Is there a way to specify which bold or italic variations to use in a font like Avenir Next?

Here's an example. By default a Avenir Next will choose Avenir Next Bold for bold but I would like it to use Avenir Next Demi Bold instead. [Here is fiddle.](http://jsfiddle.net/pdtk1rjt/)

```
<span style="font-family:'Avenir Next'">
    Normal
    <!-- I want this to be AvenirNext-DemiBold. -->
    <span style="font-weight:bold">Bold</span>
</span>    
<br>
<span style="font-family:'Avenir Next'">Normal</span>
<span style="font-family:'AvenirNext-DemiBold'">Bold</span>

```

Answer: 
CSS dosen't let you change font-family for different weights of the same font, unless you start providing your own font files, which is a lot of work for a better looking bold...

However, if you can avoid using inline styles, and instead use the `<strong>` tag to mark bold text, you'll be able to get the exact result you want, and have cleaner HTML:

```css
span {
  font-family:'Avenir Next';
}

strong {
  font-weight: bold;
  font-family: 'AvenirNext-DemiBold';
}
```

```html
<span>Normal</span>
<span><strong>Bold</strong></span>   
<br>
<span style="font-family:'Avenir Next'">Normal</span>
<span style="font-family:'AvenirNext-DemiBold'">Bold</span>
```
The solution is to use the @font-face rule.

***Update: This seems broken now on OS X 10.10.2.***

```css
 @font-face {
   font-family: 'Avenir Next';
   src: local('AvenirNext-DemiBold');
   font-weight: bold;
   font-style: normal;
 }
```

```html
<span style="font-family:'Avenir Next'">
    Normal
    <span style="font-weight:bold">Bold</span>
</span>
```