В чём ошибка подключения шрифтов?

Question

[Андрей Иванов]

В главном sass подключаю '_fonts.scss'
Тут _fonts.scss через @font-face создаю шрифты .
font-family: 'Open Sans' , но разные начертания.
Начертания normal и 600 применяются, а 300, bold нет.
Консоль ошибки не выдаёт!
В чём проблема ?

Comments

[iBird Rose]

расположи подключения в другом порядке. в убывающем по font-weight.

[Андрей Иванов]

iBird Rose,

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSansBold.woff2') format('woff2'),
        url('../fonts/OpenSansBold.woff') format('woff'),
        url('../fonts/OpenSansBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSansSemibold.woff2') format('woff2'),
    url('../fonts/OpenSansSemibold.woff') format('woff'),
    url('../fonts/OpenSansSemibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans.woff2') format('woff2'),
    url('../fonts/OpenSans.woff') format('woff'),
    url('../fonts/OpenSans.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSansLight.woff2') format('woff2'),
        url('../fonts/OpenSansLight.woff') format('woff'),
        url('../fonts/OpenSansLight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

Ничего не изменилось к сожалению

Answer 1

[NaN]

А почему бы просто не сделать так?

@font-face {
    font-family : "Open Sans Regular";
    src         : url("#{$dist-path}/fonts/open-sans-regular/open-sans.eot"); /* IE9 Compat Modes */
    src         :
        url("#{$dist-path}/fonts/open-sans-regular/open-sans.woff2") format("woff2"), /* Super Modern Browsers */
        url("#{$dist-path}/fonts/open-sans-regular/open-sans.woff") format("woff"), /* Modern Browsers */
        url("#{$dist-path}/fonts/open-sans-regular/open-sans.ttf") format("truetype"), /* Safari, Android, iOS */
        url("#{$dist-path}/fonts/open-sans-regular/open-sans.svg#opensans") format("svg"); /* Legacy iOS */
}

@font-face {
    font-family : "Open Sans Bold";
    src         : url("#{$dist-path}/fonts/open-sans-bold/open-sans-bold.eot"); /* IE9 Compat Modes */
    src         :
        url("#{$dist-path}/fonts/open-sans-bold/open-sans-bold.woff2") format("woff2"), /* Super Modern Browsers */
        url("#{$dist-path}/fonts/open-sans-bold/open-sans-bold.woff") format("woff"), /* Modern Browsers */
        url("#{$dist-path}/fonts/open-sans-bold/open-sans-bold.ttf") format("truetype"), /* Safari, Android, iOS */
        url("#{$dist-path}/fonts/open-sans-bold/open-sans-bold.svg#opensansbold") format("svg"); /* Legacy iOS */
}

Установить через scss переменным значения шрифтов типо

$font-family-base : "Open Sans Regular", sans-serif;

И для боди уже задать шрифт без всяких font-weight

.body  {
    font-family      : $font-family-base;
}