nickolyashka
@nickolyashka

Кто может помочь с подключением сторонних шрифтов?

Нужны шрифты:
  • Bebas Neue
  • ProximaNovaRegular


Оба подключил. Первый через webfonts.ru у меня не работает, а через их@import "http://webfonts.ru/import/bebasneue.css"; все нормально.

Второй подключен так:
@font-face {
    font-family: "ProximaNovaRegular";
    src: url("ProximaNovaRegular/ProximaNovaRegular.eot");
    src: url("ProximaNovaRegular/ProximaNovaRegular.eot?#iefix")format("embedded-opentype"),
    url("ProximaNovaRegular/ProximaNovaRegular.woff") format("woff"),
    url("ProximaNovaRegular/ProximaNovaRegular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}


Но все равно не работает. Если у кого есть готовые решения или нашли ошибку (ткните носом).
Заранее спасибо!
  • Вопрос задан
  • 1203 просмотра
Решения вопроса 2
kumaxim
@kumaxim
Web-программист
Вот здесь и далее ошибка
src: url("ProximaNovaRegular/ProximaNovaRegular.eot");

Браузер не может твой шрифт найти, потому что ты указал ему неверный путь. Переходя к вопросу как нужно.
Если папка ProximaNovaRegular в корне сайта
src: url("/ProximaNovaRegular/ProximaNovaRegular.eot");

Если путь от текущей папки(например folder - папка твоего шаблона, и в ней папка ProximaNovaRegular где у тебя лежит шрифт. CSS с твоей инструкцией лежит в folder)
src: url("./ProximaNovaRegular/ProximaNovaRegular.eot");

Если твой CSS лежит в папке css, а папка ProximaNovaRegular находится уровнем выше
src: url("../ProximaNovaRegular/ProximaNovaRegular.eot");


Вообщем, твоя проблема, скорей всего, в пути к файлу шрифта.

Если вдруг ты на 100% уверен что путь верный и шрифт там есть, тогда смотри не режет ли твой веб-сервер доступ к папке с этим шрифтом. Другими словами, можешь ли ты через браузер скачать файл шрифта по ссылке domen.com/ProximaNovaRegular/ProximaNovaRegular.eot Если упираешься в ошибку(403, 500, 502 и т.п.) - значит нужно разрешать через .htaccess доступ именно на директорию шрифтов.
Ответ написан
YuriMolotov
@YuriMolotov
Дизайн и вёрстка сайтов — Molotov.pro
Я просто скопирую рабочий вариант со своего сайта:

@font-face {
    font-family: Bebas;
    src: url('http://tottem.ru/wp-content/themes/ipinpro/font/bebasneue_bold.eot');
    src: url('http://tottem.ru/wp-content/themes/ipinpro/font/bebasneue_bold.eot?#iefix') format('embedded-opentype'),
         url('http://tottem.ru/wp-content/themes/ipinpro/font/bebasneue_bold.woff') format('woff'),
         url('http://tottem.ru/wp-content/themes/ipinpro/font/bebasneue_bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
IonDen
@IonDen Куратор тега Веб-разработка
JavaScript developer. IonDen.com
Обычная ошибка - неправильный путь к файлам шрифта.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы