Search code examples
cssfont-facewebfonts

Changing my web-font in css caused a my old font-size values defined in "em" to be inaccurate. How to fix it?

I have a lot of css class where I redefine font sizes, example:

.ko {font-size:2.2em;}
.szik {font-size:2.8em}

Now I replace my default font with a custom one, I define a new one:

@font-face {
font-family: BebasNeue;
src: url("http://acc-road.com/page/media/BebasNeue.otf") format("opentype");
}

My problem is that the font size of the old one does not match with the new one, and my last chance to rewrite my all code. Can I solve this problem easily? How?

I try this solution, but it's not working.

@font-face {
    font-family: BebasNeue;
    src: url("http://acc-road.com/page/media/BebasNeue.otf") format("opentype");
    font-size: 10.5em;
    font-size-adjust: 10.5;
}

Thanks for the answers.

Solution

  • The font size is not changed at all when you change font family, but the dimensions of characters will change. If this is a problem, you need to reconsider your choices of font families and font sizes.

    You’re not describing how you use fonts, so I’ll make a guess. Suppose your copy text font is Arial and you are using Bebas Neue for headings. In Bebas Neue, all letters are about as tall as uppercase letters in Arial. It’s an odd font that intentionally loses case distinctions, and this has its implications. (For example, if you used a huge relative font size like 2.8em, the sizes of letters will become even more huge, when in BebasNeue versus copy text Arial.) If you use it, you simply need to select font sizes accordingly. This should not be a big issue if you have set heading font sizes in a controlled manner.

    In principle, you could use font-size-adjust to tune font sizes according to font family, but it works on relative x-heights (10.5 would be an absurd value), and it is only supported by Firefox, in a broken manner.