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
    21 сен 2016 в 19:04
  • А путь правильно прописан к шрифту?
    – Vedenin
    22 сен 2016 в 7:19
  • Тут явно с путями борода. ../../ это ниже корня свиду, туда доступа нет если конечно вы не двумя папками выше находитесь. Лучше от корня вставлять просто /font/open-sans/OpenSans-Bold-webfont.eot') 23 сен 2016 в 7:52
  • @Vedenin добавил структуру проекта, да, тоже думал о путях и пробовал разные варианты, в вопросе указал
    – while1pass
    23 сен 2016 в 10:17
  • @ArtemGorlachev добавил структуру проекта, да, тоже думал о путях и пробовал разные варианты, в вопросе указал
    – while1pass
    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
    23 сен 2016 в 10:29
  • Тогда точно проблема в путях, http://ваш_домен/common/font/open-sans/OpenSans-Bold-webfont.eot лежит? 23 сен 2016 в 10:33
  • не находит шрифт, для второго вариант font-face такой реквест: Request URL:127.0.0.1:8000/common/font/open-sans/OpenSans-Bold-webfont.woff вроде все ок
    – while1pass
    23 сен 2016 в 10:35
1

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

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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