Невозможно обернуть голову вокруг доступа к шрифтам на сервере (получение ошибок 404 в консоли)

Question

Так что я загрузил новый шрифт под названием «Алеф». Это на иврите, но это не имеет значения, поскольку я не могу его активировать. Я почти уверен, что делаю что-то действительно глупое, но я пытался часами применять его, но безрезультатно.

Что я получил:

8 файлов:

4 х нормальный СРВ, SVG, TTF, Уофф

4 х полужирный СРВ, SVG, TTF, Уофф

И stylsheet файл с именем stylesheet.css, который теперь содержит следующий код:

@font-face { 
font-family: 'Alef'; 
src: url("/wp-content/themes/duet/Alef-bold.eot"); 
src: url("/wp-content/themes/duet/Alef-bold.eot?#iefix") format('embedded-opentype'), 
    url("/wp-content/themes/duet/Alef-bold.woff") format('woff'), 
    url("/wp-content/themes/duet/Alef-bold.ttf") format('truetype'), 
    url("/wp-content/themes/duet/Alef-bold.svg#alefbold") format('svg'); 
font-weight: bold; 
font-style: normal; 

} 
@font-face { 
font-family: 'Alef'; 
src: url("/wp-content/themes/duet/Alef-regular.eot"); 
src: url("/wp-content/themes/duet/Alef-regular.eot?#iefix") format('embedded-opentype'), 
    url("/wp-content/themes/duet/Alef-regular.woff") format('woff'), 
    url("/wp-content/themes/duet/Alef-regular.ttf") format('truetype'), 
    url("/wp-content/themes/duet/Alef-regular.svg#alefregular") format('svg'); 
    font-weight: normal; 
    font-style: normal; 

У меня есть uplo aded все файлы в моей директории темы:/WP-содержание/темы/дуэт/

Мой главный файл CSS называется style.css, который также находится в том же каталоге, я добавил этот код в файл:

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

Тогда то, что я сделал, это добавить эту строку в моем header.php:

 <link rel="stylesheet" href="/wp-content/themes/duet/stylesheet.css" type="text/css" charset="utf-8" /> 

И, конечно, я могу установить р {семейство шрифтов: Alef;)

Что я делаю неправильно ? Я получаю 404 ошибки для файлов в консоли Chrome. Он показывает CORRECT URL в правой части консоли ошибок.

Answer 1

два основных вопроса:

• Вы ссылаетесь 12 различных файлов, но у вас есть только 8 (Alef.eot, и т.д .; Алеф-regular.eot и т.д .; Алеф-bold.eot, и т.д. .)
• Я думаю, что ваши заявления 2 'src' в декларации испорчены. Должен быть только один адрес, разделенный запятыми.

Вот что я хотел бы сделать:

• Удалить объявление шрифта для лица в style.css. Переместите объявления font-face из stylesheet.css и в style.css.
• Используйте только одно выражение 'src' со всеми адресами, разделенными запятыми.

Вот код, который я хотел бы использовать: (ваши пути к файлам заменить):

`@font-face { 
    font-family: 'Alef'; 
    src: url('/wp-content/themes/duet/Alef-regular.eot?#iefix') format('embedded-opentype'), 
    url('/wp-content/themes/duet/Alef-regular.woff') format('woff'), 
    url('/wp-content/themes/duet/Alef-regular.ttf') format('truetype'), 
    url('/wp-content/themes/duet/Alef-regular.svg#Alef') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Сложение: Конечно, здесь полужирный версия ...

`@font-face { 
    font-family: 'Alef'; 
    src: url('/wp-content/themes/duet/Alef-bold.eot?#iefix') format('embedded-opentype'), 
    url('/wp-content/themes/duet/Alef-bold.woff') format('woff'), 
    url('/wp-content/themes/duet/Alef-bold.ttf') format('truetype'), 
    url('/wp-content/themes/duet/Alef-bold.svg#Alef') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 

Answer 2

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

http://www.fontsquirrel.com/tools/webfont-generator

Лучший инструмент когда-либо.