See TUGBoat publication:
https://tug.org/TUGboat/tb42-1/tb130venkatesan-transfont.html
(see also Addendum to the article that proves orthogonal mapping achieves minimal effort in terms of movement).
This is a javascript solution to the problem posed in Stackoverflow:
https://stackoverflow.com/questions/65680948/css-transition-with-fonts
see also:
https://stackoverflow.com/questions/38925840/font-family-css-transition
For more details on this problem, see:
See Chapter 13: Metafont, Metamathematics, and Metaphysics: Comments on Donald Knuth's Article "The Concept of a Meta-Font". in Douglas Hofstadter's book:
Metamagical Themas: Questing for the essence of mind and pattern.
(see also the link)
As no one answered this stackoverflow question, with help from comments by Robby Cornelissen who pointed out the excellent opentype javascript library:
https://github.com/opentypejs/opentype.js
and another crucial hint from:
https://css-tricks.com/svg-shape-morphing-works/
managed to provide a preliminary answer here.
The demo is site here:
https://cqrl.in/dev/font-transition-js.html
It works for characters which are homeomorphic to a simple circular disc (like H, X, S, C etc.) and also ones with one hole (like O, Q, A, P, etc) and also for "B" and "g" (with two holes).