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

Question

[Andrew Maser]

C помощью
@font-face {
font-family: academy;
src: url(../fonts/Academy.ttf);
подключил шрифт,
body{font-family: academy;}
вызвал, на моем компе отбражается нормально, на других отображается стандартный. помогите плиз

Comments

[Andrew Maser]

осел отображает нормально

Answer 1

[Павел]

@font-face{
font-family: 'Academy';
src: url('Academy');
src: url('Academy.eot?iefix') format('eot'),
url('Academy.woff') format('woff'),
url('Academy.ttf') format('truetype'),
url('Academy.svg#webfont') format('svg');
}

body { font-family: 'Academy', Arial, sans-serif;}

Answer 2

[Андрей Гончаров]

Часто в таких случаях консоль в панели разработчика браузера указывает ошибку. Ее бы увидеть - тогда можно давать рекомендации.
А пока просто проверьте правильность путей до шрифтов от файла с подключением @font-face.

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

Comments

[Andrew Maser]

Failed to decode downloaded font: http:///assets/fonts/Academy.ttf

[Андрей Гончаров]

Вероятнее всего, нужно воспользоваться комментом PavelMonro. Нужно сгенерировать разные форматы шрифтов например с помощью сервиса: https://www.web-font-generator.com/

[Andrew Maser]

Сделал как PavelMonro/ теперь Failed to decode downloaded font: http:///assets/fonts/Academy.ttf
Failed to decode downloaded font: http:///assets/fonts/Academy.woff

[Дмитрий]

Andrew Maser: путь то неверный

[Andrew Maser]

Дмитрий: верный сайт/assets/fonts/Academy.ttf а в @font-face{
font-family: 'Academy';
src: url('../fonts/Academy');
src: url('../fonts/Academy.eot?iefix') format('eot'),
url('../fonts/Academy.woff') format('woff'),
url('../fonts/Academy.ttf') format('truetype'),
url('../fonts/Academy.svg#webfont') format('svg');
}

[Andrew Maser]

Андрей Гончаров: кстати, осел нормально отображает.

[Андрей Гончаров]

Andrew Maser: если есть в сети сайт - кинь, поглядим что там.

[Andrew Maser]

Андрей Гончаров: starobr.bsu.ru

[Дмитрий]

Andrew Maser: почему после http: идет 3 символа слеша / ?

[Andrew Maser]

идет http:// имя сайта /...

Answer 3

[Юлия Старченко]

вы подключили только .ttf? чтобы шрифт отображался во всех браузерах нужно также подключить .eot (для IE) и woff (он понимается почти всеми и весит меньше, чем ttf, поэтому его пишем перед .ttf), не обязательно можно подключить еще svg для iphone и ipad. То есть должна быть примерно такая запись и все эти файлы в наличии:

@font-face {
font-family: 'academy';
src: url(../fonts/Academy.eot);
src: url(../fonts/Academy.eot?#iefix) format('embedded-opentype'),
url(../fonts/Academy.woff) format('woff'),
url(../fonts/Academy.ttf) format('truetype'),
url('../fonts/Academy.svg#academy') format('svg');
}