Задать вопрос
Ответы пользователя по тегу Mozilla Firefox
  • Почему Firefox не "видит" шрифт Roboto?

    IIIu6ko
    @IIIu6ko
    Лучше вот так подключай шрифты:
    @font-face {
        font-family: 'Roboto';
        src: url('Roboto-Regular.woff2') format('woff2'),
               url('Roboto-Regular.woff') format('woff');
        font-weight: normal;
    }


    Если необходимо bold ещё подключить то меняешь url и font-weight, а название оставляешь тоже.
    @font-face {
        font-family: 'Roboto';
        src: url('Roboto-Regular.woff2') format('woff2'),
               url('Roboto-Regular.woff') format('woff');
        font-weight: normal;
    }
    @font-face {
        font-family: 'Roboto';
        src: url('Roboto-bold.woff2') format('woff2'),
               url('Roboto-bold.woff') format('woff');
        font-weight: bold;
    }


    Ну и в самих стилях пишешь вот так

    // Если нужен bold
    h1 {
        font-family: Roboto;
        font-weight: bold;
    }
    // Если нужен Regular
    h1 {
        font-family: Roboto;
        font-weight: normal; // Либо можно не писать т.к. по умолчанию стоит
    }


    Собственно все остальные форматы кроме woff и woff2 можешь убрать. Можно ещё добавить ttf если нужна поддержка старых Android.

    Вот кроссбраузерность woff caniuse.com/#feat=woff
    Если уж так нужен ie8, то можно ещё eot подключить, но вряд ли оно того стоит.
    Другие форматы подключаются также в src через запятую, после последнего ; не забудь.

    Вот здесь можешь почитать поподробнее про подключение
    nicothin.pro/page/web-fonts

    woff2 я здесь брал
    https://github.com/FontFaceKit/roboto
    Ответ написан
    Комментировать