How to fix @fontface vs. default font size - layout breaks if @fontface doesn't load

If a site is using @fontface to load 2 custom fonts and also uses ariel or sans-serif font as a default/backup font but the two fonts are very different in size - how do you fix the layout issue that occurs if the @fontface font does not load?

The issue is that the @fontface font takes up less space than the default ariel font. So if the headline is sized at 45px and the @fontface font loads perfectly within the div. But if the @fontface font does not load in time - the default font loads instead (at 45px), and ariel is taking up more room in the div, causing the headline to break into 2 lines and thusly breaking the layout.

So how can we control BOTH the @fontface style and the default style. Ideally, I would like to keep the h2 @fontface style at 45px and force the default font to load at 30px for the sa开发者_如何学JAVAme h2 style.

---

I would recommend using the Google Web Font Loader this adds additional classes to the body element which indicates if the font has: started to load, finished loading, unable to load. Using these body classes you can adjust the font styles appropriately. For example if the @font-face fails you load, you can set the font family to be smaller for the fallback font.

---

you can use http://www.fontsquirrel.com/fontface/generator to generate fixed fonts.

use option X-height Matching: and Adjust Glyph Spacing

---

You can use font-size-adjust which is supported by Firefox and Blink powered browsers.

To get rid of the FOUT completely Id recommend this method.

And if @font-face isn't supported you could use this filter to serve javascript alternatives (like Cufón or Typeface.js).

---

You need to use a metric element to gauge the current actual size of the font in use, an em <=> pixel ratio.

The general idea is that you have an invisible element that uses the base font-size (like a <span>&nbsp;</span>) and then use javascript to measure how much (mainly height) it takes up on the rendered page.

From there, you can determine if you need to increase or decrease the active font-size to scale it to the desired design specs with javascript.

The technique of course depends on having a single base size set and everything else set in percentages (ala YUI reset/fonts style) Otherwise, you have to go through and rewrite everything and not just the style for body.

ref i found in my bookmarks: http://www.alistapart.com/articles/fontresizing Written during the IE7 times, but still works fine.

This technique also solves the "How do I compensate for users with zoomed text/increased font-size not breaking a page layout".

---

If you don't mind relying on JavaScript support, you could something like Modernizr which, amongst other things, will add a fontface class to the html element if @font-face is supported. Then just rework your CSS to only use the better fonts if the class is present, like so:

h2 { font:30px/1.2 sans-serif; }
html.fontface h2 { font:45px/1.2 'awesome font', sans-serif; }

---

take a look at

http://www.options4.com/options/standards/metrics.html

you will find all of the metrics are available for you

I personally recommand point system if you want to use a fixed size ( em is too large and your numbers seems wierd )