@ font-face Не работает на других компьютерах

Question

Я работаю над своим первым сайтом HTML5/CSS3, и по большей части он идет хорошо. Полностью любящий новое свойство @ font-face, и он отлично работает на моей машине. Проблема, с которой я столкнулась, - это когда она просматривается на другом устройстве (компьютер, ipad, iphone), она, похоже, не распознает свойство @ font-face и вместо этого использует запасной шрифт.

Ссылка на сайт: http://williamben.com/

Вот CSS я использую:

@font-face { font-family: 'League Gothic'; 
      src: url('_/type/league_gothic.otf') format('otf'); 
} 

Любая помощь будет оценена.

Заранее спасибо.

Answer 1

Он работает на вашем компьютере, так как у вас установлен шрифт. Если вы отключите шрифты, это не сработает. Это распространенная ошибка с использованием веб-шрифтов, поскольку большинство шрифтов люди используют в качестве веб-шрифтов, которые они также установили, поэтому, если декларация веб-шрифта неверна, они не видят ее.

Похоже, причина в том, что вы указываете на шрифт, которого не существует, или у вас неправильный путь. http://williamben.com/_/type/league_gothic.otf не существует.

Answer 2

Согласен с dstorey. Кроме того, возможно, выясните шрифт белки, чтобы получить больше покрытия: http://www.fontsquirrel.com/fontface/generator

Answer 3

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