Matching letter spacing and wrapping for different fonts with CSS on hover effect

Question

I'm facing a peculiar issue with CSS and font styling that I hope to get some insights on. I have implemented an effect where the font of a text element changes on hover. The challenge is that when the font changes, the new font has different letter spacing and wrapping, causing it to sometimes wrap to a new line. This change in wrapping results in the font no longer being hovered over, which causes a glitch where it reverts back to the original font.

Here's a basic outline of what I'm trying to achieve:

Text is displayed in Font A. On hover, the text changes to Font B. The spacing and wrapping of Font B should match that of Font A, preventing the text from shifting or wrapping to a new line. I've considered adjusting the tracking (letter-spacing) of the fonts to make them more closely match, but I'm unsure about the reliability and cross-browser compatibility of this approach.

Questions:

Is there a CSS-only solution to ensure that different fonts have matching letter spacing and wrapping behavior? Would it be more effective to use a JavaScript package that programmatically converts each word to the new font while honoring the original line breaks and spacing? If so, any recommendations for such a package? Here's a snippet of my current CSS for reference:

.my-text {
  font-family: 'Font A';
}

.my-text:hover {
  font-family: 'Font B';
}

Any advice or suggestions would be greatly appreciated!