Chrome svg-Font-Rendering Breaks Layout

В настоящее время я работаю над небольшим проектом, в котором я хотел бы использовать веб-шрифтычерез @fontface.

Я реализовал шрифт так:

@font-face {
    font-family: 'CardoRegular';
    src: url('../fonts/Cardo104s-webfont.eot');
    src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Cardo104s-webfont.woff') format('woff'),
         url('../fonts/Cardo104s-webfont.ttf') format('truetype'),
         url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

Теперь, когда вы, вероятно, испытали Chrome, проблемы с отображением этих шрифтовгладко

После некоторых поисков я нашел решение, которое, кажется, работает: вы просто перемещаете эту часть CSS:

    url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');

Итак, вы в конечном итоге с этим:

@font-face {
    font-family: 'CardoRegular';
    src: url('../fonts/Cardo104s-webfont.eot');
    src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg'),
         url('../fonts/Cardo104s-webfont.woff') format('woff'),
         url('../fonts/Cardo104s-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

Теперь Chrome отображает шрифты плавно, и это здорово.

НО:

По некоторым причинам это ИНОГДА нарушает макет. Примерно каждый третий раз, когда я загружаю страницу, я получаю что-то вроде этого:

Все перемещено влево. Более длинные тексты вырываются из своих контейнеров. Выглядит действительно странно.

** Кто-нибудь сталкивался с этой проблемой раньше?

Я был бы рад получить совет по этому вопросу. **

Не стесняйтесь взглянуть на себя:Посмотреть Fireflycovers.com онлайн

Большое спасибо!

Ответы на вопрос(3)

Ваш ответ на вопрос