0

Просмотрел аналогичные вопросы и ни в одном не нашел ответа. Добавил на сайт шрифт. В базовый css-файл добавил код из font-kit с учетом моей структуры:

../src/
├── apps
├── base
├── common
│   ├── font
│   │   └── open-sans
│   │       └── font.ttf
│   │       └── font.eot
│   │       └── font.woff
│   ├── static
│   │   └── css
│   │       └── base.css
│   ├── templates
│   └── views

варианты @font-face, которые пробовал

@font-face {
  font-family: 'open_sansbold';
  src: url('../../font/open-sans/OpenSans-Bold-webfont.eot');
  src: url('../../font/open-sans/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../../font/open-sans/OpenSans-Bold-webfont.woff') format('woff'), url('../../font/open-sans/OpenSans-Bold-webfont.ttf') format('truetype'), url('../../font/open-sans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'open_sansbold';
  src: url('/common/font/open-sans/OpenSans-Bold-webfont.eot');
  src: url('/common/font/open-sans/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('/common/font/open-sans/OpenSans-Bold-webfont.woff') format('woff'), url('/common/font/open-sans/OpenSans-Bold-webfont.ttf') format('truetype'), url('/common/font/open-sans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
  font-weight: normal;
  font-style: normal;
}

Но шрифт не применяется к элементу:

.element__symbol {
  position: absolute;
  left: 10px;
  font: bold 15pt open_sansbold;
}

При инспектировании страницы выдает open_sansbold, но используется шрифт с засечками введите сюда описание изображения

UDP. Добавил структуру проекта, на ней видно, где распологаются шрифты и базовый файл стилей.

5
  • Сообщение от IDE, что шрифт не поддерживается (font property font-family does not have). не пойму, где неправильно поключил
    – while1pass
    Commented 21 сент. 2016 в 19:04
  • А путь правильно прописан к шрифту?
    – Vedenin
    Commented 22 сент. 2016 в 7:19
  • Тут явно с путями борода. ../../ это ниже корня свиду, туда доступа нет если конечно вы не двумя папками выше находитесь. Лучше от корня вставлять просто /font/open-sans/OpenSans-Bold-webfont.eot') Commented 23 сент. 2016 в 7:52
  • @Vedenin добавил структуру проекта, да, тоже думал о путях и пробовал разные варианты, в вопросе указал
    – while1pass
    Commented 23 сент. 2016 в 10:17
  • @ArtemGorlachev добавил структуру проекта, да, тоже думал о путях и пробовал разные варианты, в вопросе указал
    – while1pass
    Commented 23 сент. 2016 в 10:18

2 ответа 2

1

У вас ошибка в подключении шрифта, кавычки забыли:

@font-face {
  font-family: 'open_sansbold';
  src: url('/common/font/open-sans/OpenSans-Bold-webfont.eot');
  src: url('/common/font/open-sans/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('/common/font/open-sans/OpenSans-Bold-webfont.woff') format('woff'), url('/common/font/open-sans/OpenSans-Bold-webfont.ttf') format('truetype'), url('/common/font/open-sans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
  font-weight: normal;
  font-style: normal;
}

.element__symbol {
  position: absolute;
  left: 10px;
  font: bold 15pt 'open_sansbold';
}
3
  • ничего не изменило
    – while1pass
    Commented 23 сент. 2016 в 10:29
  • Тогда точно проблема в путях, http://ваш_домен/common/font/open-sans/OpenSans-Bold-webfont.eot лежит? Commented 23 сент. 2016 в 10:33
  • не находит шрифт, для второго вариант font-face такой реквест: Request URL:127.0.0.1:8000/common/font/open-sans/OpenSans-Bold-webfont.woff вроде все ок
    – while1pass
    Commented 23 сент. 2016 в 10:35
1

Похоже, шрифт подключен как normal, а используется bold-написание. Попробуйте сменить font-weight на normal у element__symbol.

Проверить подгружается ли шрифт можно во вкладке Network. Только учтите, что если шрифт не используется на странице, то и подгружаться он не будет, так что проверьте сперва то, что я написал выше.

3
  • кстати да, это тоже косяк, но не причина ошибки. Commented 23 сент. 2016 в 10:28
  • @ArtemGorlachev по первому замечанию нет
    – while1pass
    Commented 23 сент. 2016 в 10:31
  • @ArtemGorlachev второе да, не находит шрифт, для второго вариант font-face такой реквест: Request URL:127.0.0.1:8000/common/font/open-sans/OpenSans-Bold-webfont.woff
    – while1pass
    Commented 23 сент. 2016 в 10:32

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.