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

Question

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 same h2 style.

Answer 1

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.