19

I have a CSS declaration like this:

font-family: font1, font2, font3;

where font1 is an embedded eot/ttf font, but the problem is that this font is smaller than the other fonts so I want to have a different font-size (1.8em) for this font (font1). All other fonts (font2, font3) stay untouched.

The problem is, that I cannot verify if the user's browser uses font1, font2 or font3. Is there any css declaration which allows different font-sizes for different families?

Thanks.

Matt Sach
  • 1,162
  • 16
  • 37
Vincent
  • 2,342
  • 1
  • 17
  • 22

2 Answers2

15

There is a way to do this, but it's as of now very badly supported. The CSS property you are looking for is font-size-adjust - a new CSS3 property introduced specifically to address this problem. The specification says:

In situations where font fallback occurs, fallback fonts may not share the same aspect ratio as the desired font family and will thus appear less readable. The font-size-adjust property is a way to preserve the readability of text when font fallback occurs. It does this by adjusting the font-size so that the x-height is the same irregardless of the font used.

However, it is only supported in Firefox as of now, so you might want to look for alternatives.

For examples of how to use it, see:

http://webdesignernotebook.com/css/the-little-known-font-size-adjust-css3-property/
https://developer.mozilla.org/en/CSS/font-size-adjust
http://www.fonttester.com/help/css_property/font-size-adjust.html
http://www.w3.org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro

Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
  • 5
    The `font-size-adjust` property is mostly useless, since in addition to lack of support on other browsers, the Firefox support is just broken. It uses wrong x-height values and may even adjust in the wrong direction. – Jukka K. Korpela Jun 01 '14 at 13:53
0

I know it has been a while, but recently I stumbled upon the very same problem as described by the OP. As font-size-adjust is still very poorly supported, I'd like to share another solution that worked for me:

Note: The following solution does only work if the fonts are embedded using the @font-face-declaration.

In that case just include e.g.

size-adjust: 90%;

in your @font-face-declaration. The relevant font will appear at only 90% the size of the specified size.

Browser support

Browser support is currently at 74% with all major browsers supported except for Safari and IE. I know this is far from optimal. But as this problem is "just" about design and not about functionality, I suppose it is better than nothing.

junjios
  • 125
  • 3