CSS Font-Size Changes When Font-Family Falls Back

Specify fallback font sizes in CSS?

I understand what you want, but I think the answer to your question is "No, this can't be done in CSS", at least not in CSS2 afaik.

Hoping someone can prove me wrong, 'cause i want this too :D

I suppose JS can accomplish this, at least up to some point. Not sure if there is a "is this font installed?" method in JS, but you may be able to make some educated guesses based on OS and such. Got no experience there sorry.

Edit: some quick googling does provide a few clever JS tricks, though I haven't tried them yet. E.g.
http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/

Another edit, after some more searching:
I was triggered by the "someone should propose it" :D. It seems CSS3 spec has the "font-size-adjust", which may be of use here. However, support in browsers other than Firefox may not be optimal at the time I write this. Here's the W3 word on that property:
http://www.w3.org/TR/WD-font/#font-size-adjust

Fonts inside a font family display different in size

What you are looking for is the font-size-adjust property — a nearly perfect solution to this problem. Of course, browser support is terrible: it only works on Firefox.

Here's an example (open in Firefox): http://jsfiddle.net/zL6vL/1/

Website shows different font size even if it was set global

But if I set the size to 0.9em the size is really small.

Yes, it is a relative size.

The body becomes 90% of the font size of the html.

A section inside the body becomes 90% of the body (so 81% of the html).

A p inside the section becomes 90% of the section (so 72.9% of the html)

And so on.

If I set font-size: 13px the size is everywhere the same.

Absolute units do not vary based on the font size of the parent element.

CSS, automatically change styles like size, etc. if font is not found and alternative is used

Caveat: this method should be able to detect whether any non monospaced font is loaded or not.

It appears it is not possible to sense the actual font in use using CSS alone. Taking ideas from font.js highlighted in @Eddie Reeder answer and also from github.com/philoye/fontunstack/tree/master we can measure the required font against another font. I have chosen a monospace font to test against and a string of narrow characters (i) as being the most likely to be different from the required font.
Code like this (which I've deliberately spelled out to make clear what is going on) placed possibly in the head or at the start of body. It could of course be placed in a function to be called at the start and/or made to remove its test divs once the required script has been set up and/or to set CSS variables if that makes more sense than having two separate css style files.

<div id="maybeOurFont" style="font-family: Lemon, monospace; font-size: 100px; position: absolute; left: -9999px; top:0;">iiiiiiiiiiiiiiiiiiii</div>
<div id="testFont" style="font-family: monospace; font-size: 100px; position: absolute; left: -9999px; top:0;">iiiiiiiiiiiiiiiiiiii</div>
<script>
  const pathToLemonStyle = "lemonstyle.css"; //replace with your path
  const pathToNoLemonstyle = "nolemonstyle.css"; // ditto
  const lemonLength = document.getElementById("maybeOurFont").offsetWidth;
  const monoLength = document.getElementById("testFont").offsetWidth;
  let useThisStyle = pathToLemonStyle;
  if ( lemonLength == monoLength ) {
    useThisStyle= pathToNoLemonstyle;
  }
  document.head.append('<style src="' + useThisStyle + '"></style>');
</script>

Set a different font-size for a fallback font

You could use the ex unit but its implementation has been buggy for some browsers.

Another alternative is using the font-size-adjust property which is supported by Gecko powered browsers.

Change font-size according to font-family using CSS?

You will need some javascript to resolve this problem, in my opinion.

1. You should take a look to this link http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/

2. Create a little script for each of your fonts

If the font Microsoft Yi Baiti is not installed you will put the font size of the second font to 15px. You can also create a test for each fonts, and add the font-size value for each.

$(document).ready(function () {  
  font.setup(); // run setup when the DOM is ready  

  if(!font.isInstalled('Microsoft Yi Baiti')) {  
   $('body').css('font-size','15px');  
  }  
}); 

How can I determine which font in font-family my browser has matched?

I use http://www.chengyinliu.com/whatfont.html it's a Chrome extension which is really nice when I don't feel like inspecting the code. Just click a button and it displays in a tooltip what font / font size a font is just by clicking the text.

Setting different line heights depending on the font

There is a font-size-adjust property in CSS3 which addresses this problem. You can specify font-size-adjust: 0.6 for your body and all fonts will be transparently scaled to have the x-height of 0.6em. This has the additional benefit that you can combine fonts with different original x-height on the same line and they will have roughly the same lowercase letter size without the need to adjust font sizes manually.

Only Firefox implements font-size-adjust (as of November 2012). WebKit does not.

See the CSS3 Fonts specification for more information and David Baron's post for some examples.

---

Related Topics