4

Имеется шрифт с несколькими видами толщины:
Museo Sans Cyrl 100
Museo Sans Cyrl 500
Museo Sans Cyrl 900

Подключаю следующим образом, но не работает:

@font-face {
    font-family: "Museo Sans Cyrl";
    src: url("../fonts/Museo Sans Cyrl 100.ttf") format(truetype);
    font-weight: 100;
}

@font-face {
    font-family: "Museo Sans Cyrl";
    src: url("../fonts/Museo Sans Cyrl 500.ttf") format(truetype);
    font-weight: 500;
}

@font-face {
    font-family: "Museo Sans Cyrl";
    src: url("../fonts/Museo Sans Cyrl 900.ttf") format(truetype);
    font-weight: 900;
}

Работает только тогда, когда каждый отдельно пропишу с указанием толщины:

@font-face {
    font-family: "Museo Sans Cyrl 900";
    src: url("../fonts/Museo Sans Cyrl 900.ttf") format(truetype);
    font-weight: 900;
} ...  

Может, я чего-то не знаю о подключении?

2
  • Не понятно в чем проблема. Первый листинг - правильный, второй нет. Если хотите, чтобы какая-то жирность была по умолчанию задайте ее родителю или добавьте шрифт на 400(т е normal). А то получается у вас нормальная жирность не добавлена, тогда конечно каждую прописывать придется.
    – kizoso
    19 дек 2017 в 9:41
  • Если правильно понимаю, должен быть обязательно шрифт с толщиной 400, который будет задавать толщину по умолчанию? 19 дек 2017 в 9:57

4 ответа 4

2

Плохая практика плодить разные имена одного того же шрифта, еще и прописывать им разные жирности. Такой код плохо поддерживается. Новый разработчик должен знать все ваши "придуманные" названия несуществующих шрифтов, и при добавлении нового начертания, или изменении шрифта может может появиться много работы. Если шрифт один, он должен быть один и у него может быть несколько начертаний.

Вообще не прописывать жирность не получится, и совершенно не ясно зачем это делать. По умолчанию в браузере, в нормализе или в резет жирность всегда будет прописана и как правило это - 400 т.е. normal. Вы этот шрифт не добавляете, и соответственно по умолчанию вы обращаетесь к этому шрифту с таким начертанием, а его нет. Либо добавьте по умолчанию жирность 500, либо добавьте этот шрифт с жирностью 400.

Вот пример подключения в вашем случае.

@font-face {
  font-family: 'Museo Sans Cyrl';
  src: url('MuseoSansCyrl-100.eot');
  src: url('MuseoSansCyrl-100.woff2') format('woff2'), url('MuseoSansCyrl-100.woff') format('woff'), url('MuseoSansCyrl-100.ttf') format('truetype'), url('MuseoSansCyrl-100.svg#MuseoSansCyrl-100') format('svg'), url('MuseoSansCyrl-100.eot?#iefix') format('embedded-opentype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans Cyrl';
  src: url('MuseoSansCyrl-500.eot');
  src: url('MuseoSansCyrl-500.woff2') format('woff2'), url('MuseoSansCyrl-500.woff') format('woff'), url('MuseoSansCyrl-500.ttf') format('truetype'), url('MuseoSansCyrl-500.svg#MuseoSansCyrl-100') format('svg'), url('MuseoSansCyrl-500.eot?#iefix') format('embedded-opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans Cyrl';
  src: url('MuseoSansCyrl-900.eot');
  src: url('MuseoSansCyrl-900.woff2') format('woff2'), url('MuseoSansCyrl-900.woff') format('woff'), url('MuseoSansCyrl-900.ttf') format('truetype'), url('MuseoSansCyrl-900.svg#MuseoSansCyrl-100') format('svg'), url('MuseoSansCyrl-900.eot?#iefix') format('embedded-opentype');
  font-weight: 900;
  font-style: normal;
}

body {
  position: relative;
  font-family: 'Museo Sans Cyrl', sans-serif;
  font-weight: 500;
}

h1 {
  font-weight: 900;
}

i {
  font-weight: 100;
}


И уберите пробелы в именах файлов.

7
  • К сожалению, не прокатывает так... Шрифты остаются стандартными 19 дек 2017 в 10:33
  • Без рабочего примера сложно догадаться что именно не так
    – kizoso
    19 дек 2017 в 10:34
  • Где именно перекрывается? Смотрели ли вы в инспекторе, что там? Как вызываете шрифты? Где смотрите, какой браузер? Подключили ли что-то кроме ttf?
    – kizoso
    19 дек 2017 в 10:37
  • 1
    @kizoso Поздравляю от души с достижением нового уровня - 5000! 19 фев 2018 в 14:50
  • 1
    @kizoso заходите к нам на огонек, в теплую компанию, когда будет время и желание У нас интересно chat.stackexchange.com/rooms/70612/svg-chat 19 фев 2018 в 17:17
1

Абсолютно такая же проблема с этим же шрифтом. Все испробовал, попробовал для интереса твой способ с указанием толщины шрифта в названии, и заработало.

  @font-face {
        font-family: 'Museo Sans Cyrl 500';
        src: url('Museo_Sans_Cyrillic/MuseoSansCyrl_500.otf') format('otf');
        font-weight: 500;
    .nav {
        font-family: 'Museo Sans Cyrl 500';
4
  • "твой способ" - извините, а чей? Здесь вопрос и ещё три ответа.
    – 0xdb
    8 фев 2019 в 21:17
  • Способ автора имелся в виду.
    – Slava
    9 фев 2019 в 10:04
  • upd. Разобрался в таком странном поведении. Указанное свойство font-family использовало установленный в системе шрифт, а не подгружаемый при помощи font-face. Добавил ссылки на все остальные форматы шрифтов, и стало грузить, но возникла следующая проблема - хоть шрифт и с поддержкой кириллицы, в реальности применяется только к латинице и к цифрам. Пробовал два разных файла шрифта. В чем может быть проблема?
    – Slava
    10 фев 2019 в 21:09
  • upd upd. Столкнулся с этой же проблемой с другим шрифтом, и разобрался в конце концов. Хоть скачиваешь шрифт и кириллический, но когда конвертируешь другие форматы через fontsuirell, если в опциях отдельно не указать, что нужен кириллический, то новые форматы не будут таковыми. Наверное, это ошибка новичка такая, и все это и так знают, но вдруг кому будет полезно.
    – Slava
    16 фев 2019 в 18:54
0

У вас же разные файлы с шрифтами а пробуете прописать всех под одно имя

для каждого Font-Family дайте отдельное имя.

Например:

@font-face {
    font-family: "Museo Sans Cyrl twing";
    src: url("../fonts/Museo Sans Cyrl 100.ttf") format(truetype);
    font-weight: 100;
}

@font-face {
    font-family: "Museo Sans Cyrl Regular";
    src: url("../fonts/Museo Sans Cyrl 500.ttf") format(truetype);
    font-weight: 500;
}

@font-face {
    font-family: "Museo Sans Cyrl Bold";
    src: url("../fonts/Museo Sans Cyrl 900.ttf") format(truetype);
    font-weight: 900;
}
3
  • Нет! Это не правильное подключение, имя шрифта должно быть одно, а вот жирности разные
    – kizoso
    19 дек 2017 в 9:42
  • Вот покажите как надо - у меня 3 файла с разными font-weight, как по мне так создание для каждого отдельное имя оптимально.
    – klifort
    19 дек 2017 в 9:47
  • Я хотел бы использовать одно название шрифта, а в стилях потом просто font-weight менять 19 дек 2017 в 9:58
0

В общем, товарищи, такая дичь. Не знаю, чем это объяснимо, надеюсь, кто-нибудь объяснит, но работает у меня только следующим образом:

@font-face {
    font-family: "Museo Sans Cyrl";
    src: url("../fonts/MuseoSansCyrl100.ttf") format(truetype),
         url("../fonts/MuseoSansCyrl100.woff") format(woff),
         url("../fonts/MuseoSansCyrl100.woff2") format(woff2);
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Museo Sans Cyrl";
    src: url("../fonts/MuseoSansCyrl500.ttf") format(truetype),
         url("../fonts/MuseoSansCyrl500.woff") format(woff),
         url("../fonts/MuseoSansCyrl500.woff2") format(woff2);
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Museo Sans Cyrl";
    src: url("../fonts/MuseoSansCyrl900.ttf") format(truetype),
         url("../fonts/MuseoSansCyrl900.woff") format(woff),
         url("../fonts/MuseoSansCyrl900.woff2") format(woff2);
    font-weight: 700;
    font-style: normal;
}


h1 {
    font-family: "Museo Sans Cyrl 700";
}

h2 {
    font-family: "Museo Sans Cyrl 500";
}

Только когда толщина подписывается в конце названия.

3
  • Очень странно.. Может быть этот шрифт таким образом где-то уже подключен ранее
    – kizoso
    19 дек 2017 в 14:54
  • Не представляю, как такое может быть возможно, ведь проект с нуля 19 дек 2017 в 19:12
  • В приведённом примере ты используешь имена шрифтов, которые не создавал.
    – Qwertiy
    19 фев 2018 в 14:57

Ваш ответ

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

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