Подключение шрифта без указания толщины

#css #шрифты

Имеется шрифт с несколькими видами толщины:
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;
} ...  


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

Ответы

Ответ 1

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

Вообще не прописывать жирность не получится, и совершенно не ясно зачем это делать.
По умолчанию в браузере, в нормализе или в резет жирность всегда будет прописана и
как правило это - 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;
}






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


Ответ 2

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

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


Ответ 3

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

для каждого 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;
}


Ответ 4

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

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


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