title: Font-family CSS transition
body: <p>I want to get a hover animation that changes the font-size and font-family the same time. I didn't manage to change back the font family <strong>precisely when</strong> the font-size transition has finished. Is this even possible?</p>
  
  <p><a href="https://i.stack.imgur.com/3wzIu.png" rel="noreferrer"><img src="https://i.stack.imgur.com/3wzIu.png" alt="enter image description here"></a></p>
  
  <p>What I have:</p>
  
  <pre><code>a{
   -webkit-transition: font-size .2s ease;
   -moz-transition: font-size .2s ease;
   -o-transition: font-size .2s ease;
   -ms-transition:font-size .2s ease;
   transition: font-size .2s ease;
  }
  
  a:hover{
   font-family: "MyHoverFont";
   font-size: 3em;
  }
  </code></pre>
  
  <p>What I tried:</p>
  
  <pre><code>a{
   ...
   -webkit-transition: font-family.2s ease;
   -moz-transition: font-family .2s ease;
   -o-transition: font-family .2s ease;
   -ms-transition: font-family .2s ease;
   transition: font-family .2s ease;
  }
  
  a:hover{
   ...
   font-family: "MyHoverFont"
  }
  </code></pre>