Не применяются шрифты css

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

Да. На форуме есть уже такая тема, но там не дано ответа, что же с ними происходит и почему они так себя ведут. Спрашиваю у Вас дорогие форумчане. Есть 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». Надеюсь на Вашу помощь форумчане.

Источник

Не применяются шрифты css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

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

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

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

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

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

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

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

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

Источник

Не видит шрифты, подключенные через css, в чем проблема?

Если в html такой код спокойно работает, то в dle такой код не работает, и не работают шрифты.

Оценить 1 комментарий

АА, у меня была такая проблема, кинб сами шрифты в папку css ну или где у тебя главные стили сайта лижат) а после экспириментируй, либо

src: url(../fonts/OpenSans-Regular.ttf);
src: url(./fonts/OpenSans-Regular.ttf);
src: url(fonts/OpenSans-Regular.ttf);

Карочи путь меняй) а еще рекомендую сгенерировать его, www.fontsquirrel.com/tools/webfont-generator

Попробуйте конвертировать ваш скрипт здесь, у вас подключается только ttf шрифт он сработает не во всех браузерах; хороший пример подключения шрифта

так же проверьте что бы пути к файлам шрифтов были правильными

Ошибок нет , все должно работать.
Как говорится — какой вопрос — такой и ответ.
Захочется более результативного ответа — напишите немного подробностей, а желательно адрес где не работает , А ЕЩЕ ЖЕЛАТЕЛЬНЕЕ НЕ ЗАДАВАТЬ ПОДОБНЫЕ ВОПРОСЫ, ГДЕ ТРЕБУЮТСЯ ЭКСТРАСЕНСЫ , ТУТ ИХ НЕТ!

Javier Nazari: а шрифты лежат в папку /templates/default/fonts/ ?если нет, то перенесите их туда и попробуйте

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

Попробуйте указать полный путь (от корневой папки сайта) к шрифту.
Например у меня для CMS Joomla путь к шрифту указан так: url(/templates/имя папки с шаблоном/css/fonts/шрифт.TTF).

У меня была подобная ситуация, проблема оказалась в том, что в linux регистр символов имеет значение, а у меня названия папок были в больших букв.

В общем у меня джумла после одновления видими перестала подгружать шрифт таким способом
url(‘/templates/.мой шаблон/fonts/cassandra.ttf’);
тогда попробовав загрузить его по пути получил отказ joomlы и ошибку 404. Понял что перенаправление.
Открыл .htaccess и добавил туда в эту строку ttf
RewriteRule !(js|ico|gif|jpg|png|ttf) index.php [QSA,L] которая гооврит о том, чтоб перенапрявлять все страницы, ссылкающиеся на любые расширения кроме указанных, на index.php

В общем вуаля, все работает. Заходите на мой сайт и заказывайте работы по песочной аннимации!)))
Заходите на мой сайт и заказывайте работы по песоч.

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

Navbar занимает весь body?

Источник