Webfont отключается при определенных размерах окна

Question

У меня проблема, и я не понимаю, что является причиной этого. Я купил крутой шрифт для использования в адаптивном дизайне. При определенных размерах окна шрифт обрезается по краю окна. Вот скриншот:

Использование CSS3-разбиения слов каким-то образом решает эту проблему, но я не хочу использовать его в этом случае. Есть ли другие варианты?
Я бы предпочел вариант только с CSS, но если бы был задействован JavaScript или jQuery, я бы тоже с этим согласился.

Используемый шрифт Armitage Black Italic от MyFonts. Вот мой CSS для этого текста:

.text {
    font-weight: normal;
    margin-bottom: 24px;
    color: blue;
    font-family: ArmitageBlack-Italic, sans-serif;
    font-size: 3.75em;
    line-height: .85;
    text-transform: uppercase;
    letter-spacing: -0.29ex;
}

Проблема может быть воссоздана любым шрифтом, если он достаточно большой. Если шрифт выделен курсивом, это действительно очевидно.
Текст находится внутри этого контейнера:

.container {
    display: table;
    width: 100%;
    height: 100%;
    padding-top: 25px;
    background-color: grey;
    text-align: center;
}

Answer 1

Учитывая, что ваш текст выделен курсивом, текст будет отображаться за пределами того места, где он "есть" - и с крупным шрифтом проблема усугубляется. Единственный способ исправить это, насколько я знаю, хакерски добавить отступы:(