Как исправить @fontface по сравнению с размером шрифта по умолчанию - макет ломается, если @fontface не ' t load

Если сайт использует @fontface для загрузки 2 пользовательских шрифтов, а также использует шрифт ariel или sans-serif в качестве шрифта по умолчанию / резервного шрифта, но эти два шрифта сильно различаются по размеру - как решить проблему с макетом что происходит, если шрифт @fontface не загружается?

Проблема в том, что шрифт @fontface занимает меньше места, чем шрифт ariel по умолчанию. Итак, если заголовок имеет размер 45 пикселей и шрифт @fontface отлично загружается в div. Но если шрифт @fontface не загружается вовремя - вместо него загружается шрифт по умолчанию (45 пикселей), а ariel занимает больше места в div, в результате чего заголовок разбивается на 2 строки и тем самым нарушает макет.

Итак, как мы можем контролировать И стиль @fontface, и стиль по умолчанию. В идеале я хотел бы оставить стиль h2 @fontface на 45 пикселей и принудительно загрузить шрифт по умолчанию на 30 пикселей для того же стиля h2.