Почему не отображается загруженный шрифт через @font-face?

Question

[smokinmiyagi]

Доброго дня! Вопрос в кассу.

Не отображается кастомный шрифт на сайте, подгруженный через @font-face. Как решить вопрос?

На персональном компьютере, на котором работаю, подгружается, потому что этот шрифт есть у меня в базе. На других устройствах, в том числе и мобильных (!), не отображается никак. Генерировал через generator, прописал в папке 755, проверил на скачивание шрифта по прямой ссылке – функционирует. Но визуально не работает.

Подскажите, пожалуйста.

Вот мой код:

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

h1, h2, h3, h4, h5 { 
    font-family: 'FuturaPT-Demi', sans-serif;!important 
    }

Comments

[smokinmiyagi]

Новые пути указал – то же самое.

@font-face {
  font-family: 'FuturaPT-Demi';
  src: url('/wp-content/themes/calafate/fonts/FuturaPT-Demi.woff');
     src: local('☺'), 
     url('/wp-content/themes/calafate/fonts/FuturaPT-Demi.eot?#iefix') format('embedded-opentype'),
    url('/wp-content/themes/calafate/fonts/FuturaPT-Demi.woff2') format('woff2'),
    url('/wp-content/themes/calafate/fonts/FuturaPT-Demi.woff') format('woff'),
    url('/wp-content/themes/calafate/fonts/FuturaPT-Demi.ttf') format('truetype'),
    url('/wp-content/themes/calafate/fonts/FuturaPT-Demi.svg') format('svg'),
    font-weight: normal;
    font-style: normal;
}

h1, h2, h3, h4, h5 { 
    font-family: 'FuturaPT-Demi', sans-serif;!importan! 
    }

[smokinmiyagi]

1. Вот мой код css сейчас.

@font-face { 
    font-family: "FuturaPT-Demi";
    src: local("FuturaPT-Demi"),
         url(FuturaPT-Demi.eot?) format("eot"), 
         url(FuturaPT-Demi.woff) format("woff"), 
         url(FuturaPT-Demi.ttf) format("truetype");
    font-weight: bold;
    font-style: regular;
}



h1, h2, h3, h4, h5 { 
  font-family: 'FuturaPT-Demi', sans-serif;!important
    }

2. Вот как должен отображаться шрифт3. Вот, как отображается сейчас.
4. Ссылка на сайт dibuenio.com

[smokinmiyagi]

Спустя неделю и нервы проблема решена.

Шрифты хранить в папке wp-includes/ и от них направлять в @font-face – все прочитается.

Всем спасибо, друзья!

Answer 1

[Eugene Chefranov]

Скорей всего ваши шрифты в папке, а пути прописаны в корень (там же где и стили). На компьютере работают так как наверно эти шрифты установлены в системе.

Comments

[smokinmiyagi]

Я понимаю это и об этом сказал выше. Прописал новые пути – та же песня.

Вот новые пути.

@font-face {
  font-family: 'FuturaPT-Demi';
  src: url('/wp-content/themes/calafate/fonts/FuturaPT-Demi.woff');
     src: local('☺'), 
     url('/wp-content/themes/calafate/fonts/FuturaPT-Demi.eot?#iefix') format('embedded-opentype'),
    url('/wp-content/themes/calafate/fonts/FuturaPT-Demi.woff2') format('woff2'),
    url('/wp-content/themes/calafate/fonts/FuturaPT-Demi.woff') format('woff'),
    url('/wp-content/themes/calafate/fonts/FuturaPT-Demi.ttf') format('truetype'),
    url('/wp-content/themes/calafate/fonts/FuturaPT-Demi.svg') format('svg'),
    font-weight: normal;
    font-style: normal;
}

h1, h2, h3, h4, h5 { 
    font-family: 'FuturaPT-Demi', sans-serif;!importan! 
    }

[Eugene Chefranov]

А где у вас находится файл который содержит эти стили? Я так понимаю это тема для WP. Попробуйте стиреть путь к шрифтам до /fonts....

[smokinmiyagi]

Евгений Чефранов, так тоже делал – не работает. Мне кажется, что возможно дело в / , .. и им подобных делах. Файл шрифта скачивается на компьютер только по wp-content/тема/имятемы/fonts/имяшрифта. По-другому выкидывает 404.

[Eugene Chefranov]

smokinmiyagi, а где файл стилей находится (style.css) или где вы это все прописываете?

[smokinmiyagi]

Евгений Чефранов, стили в корневой папке темы. Прописываю все через Custom CSS.

[Eugene Chefranov]

Надо указывать путь относительно файла стилей. Или же укажите абсолютный (полный путь с адресом сайта).

[smokinmiyagi]

Перенес в корневую папку шрифты – тоже не отображает. Замкнутый круг уже какой-то...

[Eugene Chefranov]

smokinmiyagi, попробуйте так:

Воспользоваться конвертером шрифтов

Положить все полученые шрифты в папку fonts которая находится в папке темы. Должно получится так:
\wp-content\themes\название темы\fonts

и подключить шрифты в CSS следующим образом:

@font-face {
 font-family: 'Roboto Condensed';
 src: url('fonts/RobotoCondensed-Regular.eot');
 src: url('fonts/RobotoCondensed-Regular.eot?#iefix') format('embedded-opentype'),
 url('fonts/RobotoCondensed-Regular.woff') format('woff'),
 url('fonts/RobotoCondensed-Regular.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}

обратите внимание на путь к шрифтам в CSS, запишите в таком же варианте как указано у меня выше
!important указывать не обязательно, по идее user.css подключается после основного css

[smokinmiyagi]

Спустя неделю и нервы проблема решена.

Шрифты хранить в папке wp-includes/ и от них направлять в @font-face – все прочитается.

Всем спасибо, друзья! Евгений Чефранов,