Font-family CSS transition

Question

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 precisely when the font-size transition has finished. Is this even possible?

What I have:

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;
}

What I tried:

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"
}

Answer 1

You can't use animations or transitions with font-family. This means, you actually can do this, but it would change the font-family immediately instead of morphing from one font-family to another.

But I found a good workaround for this (here):

You could do the following: have two divs, each with the same text but different font. The second div is absolute positioned below the first div and hidden by default. When the times comes to "morph" the font, animate the first visible div opacity to 0, and the second div to 1. It should look like it's morphing at the expense of a little more convoluted mark up.

Hint

It seems like you do something like the following:

 a {
   ...
   transition: font-size .2s ease;
   ...
   transition: font-family .2s ease;
 }

But in this case, the second rule overwrites the first rule, so the following is what you usually do:

transition: font-size .2s ease, font-family .2s ease;

Answer 2

Modern browser now support Variable fonts where you can control the available font's settings.

You could also go to this example for controlling the settings.

var changes = [
  "'CASL' 1, 'MONO' 1, 'wght' 758, 'slnt' -14",
  "'CASL' 0, 'MONO' 0.24, 'wght' 481, 'slnt' -2" 
];

// style="font-variation-settings: ... "
text.style.fontVariationSettings = changes[1];

// Change variation every 2 sec
var index = 0;
setInterval(function(){
   text.style.fontVariationSettings = changes[index];
   index = index === 0 ? 1 : 0;
}, 2000);

@font-face{
	font-family:"Recursive";
	src:url("https://d33wubrfki0l68.cloudfront.net/0fb48cf42677cf004e48f2608a8521a4ca06b48d/8a39e/assets/fonts/recursive-mono_casl_wght_slnt_ital--2019_11_05-00_13.woff2") format("woff2-variations");
	font-weight:300 900;
	font-display:swap
}

#text{
  text-align: center;
  height: 100px;
  font-size: 50px;
  line-height: 100px;
  font-family: Recursive;
  font-weight: 500;
  transition: 0.5s font-variation-settings ease-in;
}

<div id="text">Hello World</div>

Not all font and options is supported, if you want to find some variable font's resource you could go to this link.

Answer 3

I answered this in another question that I raised in Stack Overflow.
The Javascript demo is at: https://www.cqrl.in/dev/font-transition-js.html
The GitHub code is here: https://github.com/Sukii/font-transition
The TUGBoat paper is here: https://tug.org/TUGboat/tb42-1/tb130venkatesan-transfont.html

Answer 4

You can use a variant version font, because font-variant uses a mathematical formula for transitions that css transition understands:

https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant