Font-family CSS transition
<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>