Шрифт не отображается в Firefox

Question

Я использую @font-face - как рекомендуется, я использую .eot, .woff, .ttf и .svg. Он выглядит нормально, за исключением Firefox, где он не используется и возвращается к Helvetica/sans-serif.

Normal:

Firefox:

CSS:

@font-face { 
    font-weight: 900; 
    font-style: normal; 
    font-family: 'Lato'; 
    src: url('http://static.tumblr.com/cv6ot7o/LREnbhzla/lato-thin.eot'); 
    src: url('http://static.tumblr.com/cv6ot7o/LREnbhzla/lato-thin.eot?#iefix') format('eot'), url('http://static.tumblr.com/cv6ot7o/iQinbhzmp/lato-thin.woff') format('woff'), url('http://static.tumblr.com/cv6ot7o/Lxynbhzok/lato-thin.ttf') format('truetype'), url('http://static.tumblr.com/cv6ot7o/p2Anbj1jl/lato-thin.svg') format('svg'); 
} 

h1 { 
    font-family: "Lato", "HelveticaNeue-UltraLight", "Helvetica Neue UltraLight", sans-serif; 
    font-size: 4em; 
    } 

HTML:

<h1>title</h1> 

JSFiddle

Как можно это исправить?

Я видел некоторые подобные вопросы, предлагая использовать местные ссылки для шрифтов, но я не могу использовать его здесь.

Answer 1

Если посмотреть на лог консоли в Firefox, он имеет записи, как это:

загружаемый шрифт: Ошибка загрузки (семейство шрифтов: «Лато» стиль: нормальный вес: 900 натяжкой: нормальный индекс ЦСИ: 1): неправильный URI или межсайтовый доступ не разрешен источник: http://static.tumblr.com/cv6ot7o/iQinbhzmp/lato-thin.woff

Таким образом, очевидно, что сайт хочет запретить удаленное использование своих шрифтов.

Вместо этого используйте вместо этого Lato at Google fonts.

Независимо от этого, очень нелогично объявлять Lato Thin весом 900. Объявляется как имеющее вес 100. Вы должны использовать <link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet'> и h1 { font-family: Lato; font-weight: 100 }.