Разметка Chrome svg-Font-Rendering Layout

В настоящее время я работаю над небольшим проектом, в котором я бы хотел использовать webfonts через @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 делает шрифты плавно, что отлично.

НО:

По какой-то причине этот SOMETIMES разбивает макет. Примерно в третий раз я загружаю страницу. Я получу что-то вроде этого:

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

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

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

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

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

Ответы

@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;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'CardoRegular';
        src: url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');

    }
}