Как выставить приоритет шрифтов в css?

Question

[webfln]

Здравствуйте. Используем шрифт Roboto на своем проекте, который подключается через google fonts.

css:
font-family: Roboto, sans-serif;

Браузер выбирает первый шрифт из списка который установлен или может быть скачан используя правило @font-face .
Но если у пользователя уже установлен шрифт Roboto, то браузер не будет брать шрифт через font-face, а возьмет шрифт из его устройства.

Вот тут и возникает проблема с которой мы столкнулись. У пользователя может быть установлен кривой шрифт, либо его старая версия (не понятно почему так произошло), и сам шрифт отображается иначе.

Как можно решить эту проблему?

Comments

[Stalker_RED]

Никак не нужно ее решать, это не ваша проблема.
Вы конечно можете переименовать шрифт, чтобы он гарантированно скачивался у всех-всех-всех, но это плохая затея.

[Степан Крапивин]

чисто теоретически, почему бы при подключении шрифта не назвать его другим именем?

@font-face {
    font-family: 'MyRoboto';
    src: url('http://domain.com/fonts/font.ttf');
}

А потом указать, сначала свой шрифт, уже потом стандартный

font-family: 'MyRoboto', Roboto, sans-serif;

[Максим Тимофеев]

Stalker_RED, Не согласен это проблема разработчика. И тут два варианта, если ломается все значит надо скармливать как предложил Степан. Другой вопрос если это частный случай и последствия не критичны, то можно пренебречь.

[Сергей delphinpro]

@font-face {
    font-family: 'Roboto';
    src: local('xxx'), url('http://domain.com/fonts/font.ttf');
}

Answer 1

[webfln]

Проблему выявил. Когда подключаются шрифты через google-fonts, он использует параметр local, и именно поэтому сначала грузится шрифт из системы

src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92... format('woff2');

Answer 2

[Дима Долготер]

попробуй загрузить свой шрифт и в @font-face задать другой font-family