CSS align based on font-family

Question

I've set the font-family of a div to "Vermin Vibes", fantasy, serif; , so that if the first font is not avaiable, the browser will automatically use the next one

#myheader {
    position: sticky;
    top: 1rem;

    text-align: center;

    font-family: "Vermin Vibes", fantasy, serif;
    font-size: 6rem;
}

The problem is that when the font changes family , it changes his size and his alignment from the top of the screen...

How can I set top and font-size to change when font-family changes?

Answer 1

CSS is only concerned with how your content is styled. You might have fonts dependent on the content, so a solution would be modifying your HTML since HTML is for defining the actual content of the page. I think this would be more related to investigated browser compatibility for your client.

By the time a fallback font-family is determined, the content has already loaded. So you'll need Javascript for that.

So determine where the processing for CSS styles will happen before it is compiled and evaluated by your browser. You may have to extract the font-family using Javascript and set styles conditionally if you are using plain CSS without a preprocessor.