0

Столкнулся со странной проблемой - шрифты, которые я подключаю в CSS, отображаются не всегда корректно.

CSS:

@font-face {
    font-family: RobotoRegular;
    src: url(Roboto-Regular.ttf);
}

@font-face {
    font-family: RobotoMedium;
    src: url(Roboto-Medium.ttf);
}

body {
    font-family: RobotoRegular;
}

.material-button {
    font-size: 16px;

    display: inline-block;
    background-color: #507299;
    border: none;
    border-radius: 2px;

    padding: 0 16px !important;

    height: 36px;
    line-height: 36px;
    white-space: nowrap;

    font-family: RobotoMedium;
    font-size: 14px;
    text-transform: uppercase;
    color: #ffffff;
}

Font Awesome подключается стандартным способом, устанавливается через bower.

HTML:

<button type="button" class="material-button">
    <i class="icon fa fa-arrow-down"></i> Загрузить
</button>

В норме, все должно выглядеть так:

введите сюда описание изображения

Но иногда, по абсолютно не понятной для меня причине, шрифты отображаются вот так:

введите сюда описание изображения

Обычно, это происходит сразу после загрузки сайта на хостинг. Скажем, первые раз 10 на странице шрифты отображаются не правильно, а потом - нормально...

С чем это может быть связано?

3
  • В браузере не пробовали в инструментах разработчика в консоли и во вкладке сеть посмотреть что происходит, когда кривое отображение шрифта?
    – Visman
    10 ноя 2016 в 11:38
  • возможно, шрифты подгружаются слишком поздно. можно попробовать поднять их в списке подключения повыше. а также проверить, чтобы в консоли не было ошибок
    – lexxl
    10 ноя 2016 в 11:41
  • 1
    Да, пропишите @font-face в самом начале файла, к тому же нужен весь набор шрифтов: .eot, .woff, .ttf, .svg с указанием форматов
    – Alex
    10 ноя 2016 в 11:54

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.