Как правильно подключить шрифт через @font-face?

Question

[Артем Шеленговский]

Тестирую сайт на localhost и подключаю свой шрифт таким образом -

@font-face {
    font-family: 'bebas_neuebook';
    src: url('font-webfont.eot');
    src: url('font-webfont.eot?#iefix') format('embedded-opentype'),
         url('font-webfont.woff2') format('woff2'),
         url('font-webfont.woff') format('woff'),
         url('font-webfont.ttf') format('truetype'),
         url('font-webfont.svg#bebas_neuebook') format('svg');
    font-weight: normal;
    font-style: normal;

}

Вопрос: Почему шрифт работает только после того как я его установлю к себе на ПК? До этого он не отображается. Он же должен подгружаться без установки

Answer 1

[Сергей delphinpro]

Вероятно, у вас указаны неправильные пути к файлам шрифтов.

UPD
Откройте инспектор кода в браузере (F12 в Chrome), перейдите на вкладку network, обновите страницу. Увидите все запросы, которые делает ваша страница к серверу. Некоторые строки будут красные, это значит сервер вернул 404 ошибку (ресурс не найден). Просмотрите эти строки, по какому пути запрашивается шрифт и сравните с тем, по которому он лежит реально. Ну и поправьте, соответственно, пути в правилах url()

Answer 2

[Константин Б.]

а он есть по тому пути по которому ты его пишешь? для того чтобы он работал он должен лежать в той же папке и что и твой css.

Comments

[Николай Шабалин]

Нет, не верно. Он должен лежать там же где указан в url('path'). CSS и шрифты могут лежать где захочет разработчик.

[teotlu]

Николай Шабалин: всё он правильно написал. Он написал это применительно к коду, который выложен в описании вопроса. При таком коде шрифты действительно должны лежать в той же папке, чтобы работать.

[Николай Шабалин]

teotlu: это да. Костик прости меня. Но лучше так никогда не делать.

[teotlu]

Николай Шабалин: это точно)

[Константин Б.]

Да согласен) и я действительно писал по ситуации)

[Артем Шеленговский]

teotlu: У меня шрифты лежат там же где css

[teotlu]

Артем Шеленговский: вот это уже странно. Попробуйте на всякий случай решение для кросс-доменного подключения font-face, хотя по идее у вас другой случай. davidwalsh.name/cdn-fonts — вот оно. Там надо в корневой .htaccess добавить три строчки. Скорее всего не поможет, но мало ли :)

[Сергей delphinpro]

Артем Шеленговский: а вы страницу открываете по http:// или просто как file:/// ?

[Артем Шеленговский]

Всем спасибо за помощь Вы были правы - неправильно был указан путь к шрифту + шрифт был только для латинских букв. Всем добра и счастья!!!)

Answer 3

[Владимир Горбунов]

@font-face {
    font-family: 'bebas_neuebook';
    src: url('путь до шрифта/bebas_neuebook.eot');
    src: url('путь до шрифта/bebas_neuebook.eot?#iefix') format('embedded-opentype'),
         url('путь до шрифта/bebas_neuebook.woff2') format('woff2'),
         url(путь до шрифта/'bebas_neuebook.woff') format('woff'),
         url('путь до шрифта/bebas_neuebook.ttf') format('truetype'),
    font-weight: normal;
    font-style: normal;
}