Не применяется шрифт html

Не подключаются шрифты

Да. На форуме есть уже такая тема, но там не дано ответа, что же с ними происходит и почему они так себя ведут. Спрашиваю у Вас дорогие форумчане. Есть 8-ем шрифтов подключаемых к сайту (рис. 1). Все шрифты хранятся в папке fonts (рис. 2), на этом же скрине показана структура сайта. Все шрифты имеют свою папку и три вида расширения — это .ttf/.eot/.woff. Каждый из этих восьми шрифтов расположен в своей папке. Все шрифты подключены в одном файле (fonts.css) находящимся в папке «styles» (рис. 3). В этом файле «fonts.css» находятся данные строчки кода, которые Вы можете просмотреть ниже:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79

@font-face { font-family: 'Alice_Regular'; src: url('../fonts/Alice/Alice_Regular.eot'); src: url('../fonts/Alice/Alice_Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Alice/Alice_Regular.woff') format('woff'), url('../fonts/Alice/Alice_Regular.ttf') format('truetype'), font-style: normal; font-weight: normal; } @font-face { font-family: 'CenturyGothic'; src: url('../fonts/CenturyGothic/CenturyGothic.eot'); src: url('../fonts/CenturyGothic/CenturyGothic.eot?#iefix') format('embedded-opentype'), url('../fonts/CenturyGothic/CenturyGothic.woff') format('woff'), url('../fonts/CenturyGothic/CenturyGothic.ttf') format('truetype'), font-style: normal; font-weight: normal; } @font-face { font-family: 'CenturyGothic-Italic'; src: url('../fonts/CenturyGothic-Italic/CenturyGothic-Italic.eot'); src: url('../fonts/CenturyGothic-Italic/CenturyGothic-Italic.eot?#iefix') format('embedded-opentype'), url('../fonts/CenturyGothic-Italic/CenturyGothic-Italic.woff') format('woff'), url('../fonts/CenturyGothic-Italic/CenturyGothic-Italic.ttf') format('truetype'), font-style: normal; font-weight: normal; } @font-face { font-family: 'GoodVibesPro'; src: url('../fonts/GoodVibesPro/GoodVibesPro.eot'); src: url('../fonts/GoodVibesPro/GoodVibesPro.eot?#iefix') format('embedded-opentype'), url('../fonts/GoodVibesPro/GoodVibesPro.woff') format('woff'), url('../fonts/GoodVibesPro/GoodVibesPro.ttf') format('truetype'), font-style: normal; font-weight: normal; } @font-face { font-family: 'IntroCondBlackFree'; src: url('../fonts/IntroCondBlackFree/IntroCondBlackFree.eot'); src: url('../fonts/IntroCondBlackFree/IntroCondBlackFree.eot?#iefix') format('embedded-opentype'), url('../fonts/IntroCondBlackFree/IntroCondBlackFree.woff') format('woff'), url('../fonts/IntroCondBlackFree/IntroCondBlackFree.ttf') format('truetype'), font-style: normal; font-weight: normal; } @font-face { font-family: 'OceanSix'; src: url('../fonts/OceanSix/OceanSix.eot'); src: url('../fonts/OceanSix/OceanSix.eot?#iefix') format('embedded-opentype'), url('../fonts/OceanSix/OceanSix.woff') format('woff'), url('../fonts/OceanSix/OceanSix.ttf') format('truetype'), font-style: normal; font-weight: normal; } @font-face { font-family: 'RealizeMyPassion'; src: url('../fonts/RealizeMyPassion/RealizeMyPassion.eot'); src: url('../fonts/RealizeMyPassion/RealizeMyPassion.eot?#iefix') format('embedded-opentype'), url('../fonts/RealizeMyPassion/RealizeMyPassion.woff') format('woff'), url('../fonts/RealizeMyPassion/RealizeMyPassion.ttf') format('truetype'), font-style: normal; font-weight: normal; } @font-face { font-family: 'RopaSansPro'; src: url('../fonts/RopaSansPro/RopaSansPro.eot'); src: url('../fonts/RopaSansPro/RopaSansPro.eot?#iefix') format('embedded-opentype'), url('../fonts/RopaSansPro/RopaSansPro.woff') format('woff'), url('../fonts/RopaSansPro/RopaSansPro.ttf') format('truetype'), font-style: normal; font-weight: normal; }

Вот, что у меня написано в файле index.html (собственно мои подключения файлов), где тег

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

 html lang="ru"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1"> title>TheEdjeofSilence/title> link rel="stylesheet" href="styles/fonts.css"> link rel="stylesheet" href="styles/bootstrap.min.css"> link rel="stylesheet" href="styles/style.css"> link rel="stylesheet" href="styles/media.css"> /head> script>document.write('script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1">/' + 'script>')/script> body> /body> /html>

В файле «media.css» подключены медиа запросы. Вроде бы структуру показал, теперь вопрос. Почему у меня не работают два шрифта — это «CenturyGothic-Italic» и «IntroCondBlackFree», а все остальные шрифты работают. Скачивал я эти же шрифты с другого сайта и все равно не работаю. Конвертировал я все шрифты с помощью сайта «Online Fonts Converter». Надеюсь на Вашу помощь форумчане.

Источник

Почему не подключаются шрифты к html странице?

Есть папка styles в которой лежит файл styles.css и fonts.css есть папка fonts в которой лежат сами шрифты, файл index.html лежит в корневой дирректории. Прилагаю все скриншоты.

Шрифты подключаются в файле fonts css по конструкции @font-face, затем в файле styles.css подключаются к html странице. В самом html все файлы (styles.css, fonts.css) подключаются. В чем проблема, подскажите пожалуйста!

А должно быть вот столько и в таких форматах. Для каждого шрифта.

Voldemar Krok Высший разум (596814) Error, И не только! Нет КОМПЛЕКТА и нет ГЛАВНОГО — woff, без двойки. Конвертируй вот здесь: получишь полный комплект. http://www.font2web.com

Спасибо огромное, помогло. А почему так происходит? Т. е получается, woff2 не работают? Зачем тогда их подключать?

Voldemar Krok Высший разум (596814) Error, Последнее время — не работает. почему-то. Я их и не подключаю, woff2.

Ошибки загрузки в консоли есть или шрифт просто не применяется? Если не применяется – у вас в настройках шрифта задано свойство font-weight: 600, поэтому указывать нужно не только font-family, но и такой же font-weight.

Про то, что нужны еще tiff, eot и svg – не обращайте внимания, эти форматы уже давно можно не поддерживать, достаточно двух: woff2 и woff.

Источник

Почему не подключается шрифт font-face?

Если не забыл указать в body(font-family), и шрифты находятся в корневом каталоге, попробуй убрать .. / и кавычки убери.

почитай про относительные а абсолютные ссылки, браузер мог неправильно преобразовать относительные ссылки

@font-face font-family: ‘имя_шрифта’;
src: url(‘шрифты/имя_шрифта.woff’)
format(‘woff’);
font-weight: normal;
font-style: normal;
>

woff — этот формат поддержиается везде, достаточно только его

Сомнительные советы.
Не достаточно подключить один woff. Для корректной работы шрифта во всех браузерах и на всех устройствах — нужны eot, woff2, ttf

С синтаксисом у вас все в порядке. Все возможные причины, по которым шрифт мог не подключиться:

1. Неверно указан путь к папке с шрифтами(../). Здесь может быть несколько точек, может одна, может не быть вовсе, в зависимости от положения папки.
2. Не корректные шрифты. Некоторые генераторы конвертируют шрифты с ошибками
3. Банально не положили шрифты в папку fonts
4. Банально не прописали свойство font-family:»Open Sans» нужному классу

Не уверен на счет вложенности fonts/OpenSans/OpenSans-Regular. Лучше все шрифты класть в папку fonts без создания доп. папок в ней.

Источник

Не применяется шрифт html

Вчера я написал про то, как подключать шрифты. Поскольку — имею некоторый опыт после первой версии данной статьи, то могу поделиться опытом!

Так Почему не работает подключенный шрифт.

Шрифт подключенный может не работать по множеству причин!

Самая первая и простая — это неверное подключение!

Тупо — вы не правильно написали путь!

Создадим умышленно ошибку подключения шрифта!

Давайте попробуем открыть ссылку, по которой вы пытаетесь подключить ваш шрифт:

Естественно, что шрифт не подключится — потому, что вашего шрифта — просто нет!

Исправим ошибку пути подключенного шрифта.

Теперь заменим на правильный путь:

Исправленная ошибка подключения шрифта.

Теперь исправленную ошибку разместим прямо здесь:

Почему не работает подключенный шрифт.

Выше я рассказал — реальную ошибку подключения, когда шрифт не работает — это одна из самых распространенных ошибок! Другие ошибки :

Не правильный формат файла шрифта.

Иногда, как бы странно это не звучало, то файл «ttf» или «otf» — может. не соответствовать каким-то критериям сервера.

Эту ошибку я встречал пару раз, и даже хотел отложить данный файл, но потом, что-то все благополучно забылось.

Дело в том, что подключая шрифт «otf» — он никак не подключается.

Я его переформатировал в «ttf» где-то онлайн. и все заработало!

Шрифт не поддерживает заявленые свойства.

Частенько встречающаяся ошибка — написано, что поддерживает кириллицу, но на самом деле нет!

Как бороться с такой ошибкой подключения шрифта?

У вас должен быть рабочий код правильно подключенного шрифта!

Меняете название файла шрифта и проверяете с новым шрифтом.

Если на рабочем коде шрифт не срабатывает — значит — он тупо не поддерживает кириллицу!

Шрифт есть, путь правильный, но не открывается.

Довольно редкая ошибка. но возможная причина. что в файле htaccess отсутствует необходимые условия.

Название шрифта не соответствует требованиям.

Иногда бывают прнимитивные ошибки подключения шрифта, такие как:

Возможная ошибка подключения шрифта — «ПРОПИСНЫЕ» буквы в названии шрифта.

Возможная ошибка подключения шрифта — между двумя словами пропуск, например : «BadScript Regular.ttf», нужно исправить на

«BadScript-Regular.ttf» , либо на «BadScript_Regular.ttf»

Код без ошибки подключения шрифта к сайту:

Вот предлагаю вам код без ошибки шрифтов.

Вы можете взять его и проверить на своём сайте!

Источник

не подключается шрифт

Шрифт не подключается , относительный путь в font-face указан правильно, в чем может быть дело.

Ссылка на комментарий

Поделиться на других сайтах

10 ответов на этот вопрос

Рекомендованные сообщения

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.

Обсуждения

http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы

margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2	row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

если не критично еще можно использовать обертку внутри ячеек, и с ней много чего можно дополнительного реализовать в таблицах

Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.

тогда как выше предложили пустую строку

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2		row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

или если подсветка ячеек не обязательна, то можно так

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2	row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

Источник