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

@nikolc · Регистрация: 17.01.2014

Author24 — интернет-сервис помощи студентам

Здравствуте.
Подключаю шрифт вот так

CSS

@font-face {
 font-family:BANGKOK;
 src: url(/font/BANGKOK.ttf); 
}
 
body{
    font-family: BANGKOK;
}

В чем ошибка? Шрифт напроч отказывается отображаться.
Размер самого файла шрифта 50кб

@monochromer · 01.04.2014, 01:35

Путь в формате /font/BANGKOK.ttf работает только с сервером.
Попробуйте относительный путь font/BANGKOK.ttf.

@nikolc · 01.04.2014, 01:59 **[ТС]**

ну как бы это все делается на виртуальном сервере(xampp).
При относительных путях

Javascript

1	http://site.ru/css/font/BANGKOK.ttf 404 (Not Found)

Как видно он пытается найти файл шрифта в папке со стилями, и ничего не находит, ну собственно это и логично

@MathMath · 01.04.2014, 02:07

Вам необходимо перейти на уровень ниже

CSS

@font-face {
 font-family:BANGKOK;
 src: url('../font/BANGKOK.ttf'); 
}

@nikolc · 01.04.2014, 02:17 **[ТС]**

ну люди, Вы чего? Внимательней бы читали хоть, что ли.

вот так

CSS

1	src: url(/font/BANGKOK.ttf);

Браузер не ругается что шрифт не может найти, он почему то его просто не желает отображать

вот так

CSS

1	src: url(font/BANGKOK.ttf);

Браузер шрифт не может найти, потому как начинает искать в папке со стилями

Вот так

CSS

1	src: url('../font/BANGKOK.ttf');

Опять же браузер не может шрифт найти, так как путь выходит из корневой директории сайта

Добавлено через 3 минуты
какие еще у кого идеи есть? почему шрифт может не отображаться на сайте?

@MathMath · 01.04.2014, 02:21

Ooooopsss!
Не заметил, что в корне папка, привык к `assets` и `static`.

Насколько я знаю, имя в font-family должно иметь название шрифта, а не имя файла. Проверьте этот момент, как-то давно попался с этим.

А еще попробуйте генератор font-face: Клац или Клац

@Vladislav WebDev · 01.04.2014, 08:06

Сообщение от MathMath

Насколько я знаю, имя в font-family должно иметь название шрифта, а не имя файла

Нет, имя в font-family может быть любое. Вы просто сами задаете его для дальнейшего его использования.
nikolc, может браузер формат не поддерживает? Хотя ttf самый поддерживаемый формат вроде как. Странно вообще, почему не работает.

Добавлено через 3 минуты
nikolc, в каком браузере запускаете? ни в ие случаем?

Добавлено через 1 час 52 минуты
nikolc, ксати, попробуйте подключить другой шрифт тоже в формате .ttf и посмотрите, будет ли работать. Быть может файл шрифта "битый", кто его знает...

Добавлено через 2 минуты
Или если решили проблему уже, то будте добры, отпишитесь как решили, самому интересно просто

@xZooYx · 01.04.2014, 08:26

nikolc, если проверяете в IE, то там реально может не работать.
Еще если проверяете на русском тексте, а в шрифте такового нету, то тоже ничего не увидите.

@nikolc · 01.04.2014, 11:48 **[ТС]**

xZooYx, Suby, MathMath, В общем, подключается вообще два шрифта у меня

CSS

@font-face {
 font-family:BANGKOK;
 src: url(/font/11540.ttf); 
}
@font-face {
 font-family:Izhitsa;
 src: url(/font/PtmeRtjx.ttf); 
}

Видать шрифты действительно битые были, заменил и картина немного изменилась.

В хроме:
BANGKOK не работает
Izhitsa работает

В мозиле
BANGKOK не работает
Izhitsa не работает

В опере
BANGKOK работает
Izhitsa работает

Теперь у кого какие идеи? у самого в первый раз такая ерунда из-за шрифтов

@Vladislav WebDev · 01.04.2014, 11:57

nikolc, хм, сам первый раз вижу такую проблему. Шрифты вообще откуда брали/качали? Может есть смысл заново перекачать? Попробуйте еще раз.

@nikolc · 01.04.2014, 12:06 **[ТС]**

Suby, ну первый раз скачал по быстрому из интернета с fonts-online.ru, потом пробовал ставить те что в операционке установлены в папочке fonts и с которыми работаю, ну собственно с которыми и макеты просматривал

@Vladislav WebDev · 01.04.2014, 12:31

nikolc, т.е. вы скачали их с http://www.fonts-online.ru, потом перекачали их оттуда же или использовали уже установленные?
попробуйте найти и скачать/подключить эти же шрифты с норм сервиса какого-нить, например с google fonts.

Добавлено через 2 минуты
И еще кстати кеш в браузере попробуйте очистить, может он в кеше уже лежат, битые.

@nikolc · 01.04.2014, 12:45 **[ТС]**

Suby,
Во первых, шрифтов этих на google fonts нет
Во вторых, если бы внимательно прочитали мое сообщение там была такая фраза "быстрому из интернета с fonts-online.ru", те шрифты которые были на компьютере и которые использовал для макетов скачивались с норм сервиса fonts.com
В третьих, кеш браузера очищал в первую очередь

Как Вариант конечно использовать Cufon, но из за некоторых особенностей работы Cufon мне не подходит.

@Vladislav WebDev · 01.04.2014, 12:48

nikolc, если не трудно, выложите скриншот с этими шрифтами в браузере где они работают и напишите оригинальное название шрифтов.

@nikolc · 01.04.2014, 13:11 **[ТС]**

Suby, не трудно вот

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

Шрифт первый "Bangkok Cyr"
Шрифт второй "Izhitsa Cyrillic"

Комментарий модератора

Прикрепляйте файлы и изображения к сообщениям.
https://www.cyberforum.ru/abou... post594251

@Vladislav WebDev · 01.04.2014, 22:22

nikolc, вобщем хорошие новости... Скачал я в качестве примера Bangkok Cyr с того же fonts-online.ru в формате .ttf и о чудо, у меня он тоже не пашет. Точне пашет только в убогом ие и в сафари, а в хроме, фаерфоксе и опере не пашет. Что интересно, рядом в папке лежит еще один шрифт, тоже в .ttf, подключил его - он пашет во всех браузерах, кроме ие. Такие дела))) Вобщем нужно юзать сразу несколько форматов по старинке и не париться, какой-нить да заработает))

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

Добавлено через 52 секунды
Вот вам и ttf...

@nikolc · 01.04.2014, 22:46 **[ТС]**

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

@Vladislav WebDev 327 / 217 / 97 Регистрация: 04.11.2012 Сообщений: 638
	01.04.2014, 11:57	10
	nikolc, хм, сам первый раз вижу такую проблему. Шрифты вообще откуда брали/качали? Может есть смысл заново перекачать? Попробуйте еще раз. 0

@Vladislav WebDev 327 / 217 / 97 Регистрация: 04.11.2012 Сообщений: 638
	01.04.2014, 22:22	16
	nikolc, вобщем хорошие новости... Скачал я в качестве примера Bangkok Cyr с того же fonts-online.ru в формате .ttf и о чудо, у меня он тоже не пашет. Точне пашет только в убогом ие и в сафари, а в хроме, фаерфоксе и опере не пашет. Что интересно, рядом в папке лежит еще один шрифт, тоже в .ttf, подключил его - он пашет во всех браузерах, кроме ие. Такие дела))) Вобщем нужно юзать сразу несколько форматов по старинке и не париться, какой-нить да заработает)) Добавлено через 8 минут Скачал сейчас такой же шрифт с другого ресурса, вес файла почему-то оказался на пару кб меньше. Толку ноль, ведет себя так же как и предыдущий. Добавлено через 52 секунды Вот вам и ttf... 0

Новые блоги и статьи
Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .	Что такое NullReferenceException и как исправить? InfoMaster 08.01.2025 NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .	Что такое Null Pointer Exception (NPE) и как это исправить? InfoMaster 08.01.2025 Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .	Русский язык в консоли C++ InfoMaster 08.01.2025 При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .	Telegram бот на C# InfoMaster 08.01.2025 Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .	Использование GraphQL в Go (Golang) InfoMaster 08.01.2025 Go (Golang) является одним из наиболее популярных языков программирования, используемых для создания высокопроизводительных серверных приложений. Его архитектурные особенности и встроенные. . .
Что лучше использовать при создании класса в Java: сеттеры или конструктор? Alexander-7 08.01.2025 Вопрос подробнее: На вопрос: «Когда одновременно создаются конструктор и сеттеры в классе – это нормально?» куратор уточнил: «Ваш класс может вообще не иметь сеттеров, а только конструктор и геттеры. . .	Как работать с GraphQL на TypeScript InfoMaster 08.01.2025 Введение в GraphQL и TypeScript В современной разработке веб-приложений GraphQL стал мощным инструментом для создания гибких и эффективных API. В сочетании с TypeScript, эта технология. . .	Счётчик на базе сумматоров + регистров и генератора сигналов согласования. Hrethgir 07.01.2025 Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .	Как перейти с Options API на Composition API в Vue.js BasicMan 06.01.2025 Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .	Архитектура современных процессоров inter-admin 06.01.2025 Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .	История создания реляционной модели баз данных, правила Кодда Programming 06.01.2025 Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	01.04.2014, 01:35	2
	Путь в формате /font/BANGKOK.ttf работает только с сервером. Попробуйте относительный путь font/BANGKOK.ttf. 0

@MathMath 29 / 29 / 9 Регистрация: 03.03.2014 Сообщений: 58
	01.04.2014, 02:21	6
	Ooooopsss! Не заметил, что в корне папка, привык к `assets` и `static`. Насколько я знаю, имя в font-family должно иметь название шрифта, а не имя файла. Проверьте этот момент, как-то давно попался с этим. А еще попробуйте генератор font-face: Клац или Клац 1

@Vladislav WebDev 327 / 217 / 97 Регистрация: 04.11.2012 Сообщений: 638
	01.04.2014, 08:06	7
	Сообщение от MathMath Насколько я знаю, имя в font-family должно иметь название шрифта, а не имя файла Нет, имя в font-family может быть любое. Вы просто сами задаете его для дальнейшего его использования. nikolc, может браузер формат не поддерживает? Хотя ttf самый поддерживаемый формат вроде как. Странно вообще, почему не работает. Добавлено через 3 минуты nikolc, в каком браузере запускаете? ни в ие случаем? Добавлено через 1 час 52 минуты nikolc, ксати, попробуйте подключить другой шрифт тоже в формате .ttf и посмотрите, будет ли работать. Быть может файл шрифта "битый", кто его знает... Добавлено через 2 минуты Или если решили проблему уже, то будте добры, отпишитесь как решили, самому интересно просто 0

@xZooYx 120 / 101 / 9 Регистрация: 12.06.2012 Сообщений: 322 Записей в блоге: 12
	01.04.2014, 08:26	8
	nikolc, если проверяете в IE, то там реально может не работать. Еще если проверяете на русском тексте, а в шрифте такового нету, то тоже ничего не увидите. 0

@nikolc 1 / 1 / 0 Регистрация: 17.01.2014 Сообщений: 10
	01.04.2014, 12:06 [ТС]	11
	Suby, ну первый раз скачал по быстрому из интернета с fonts-online.ru, потом пробовал ставить те что в операционке установлены в папочке fonts и с которыми работаю, ну собственно с которыми и макеты просматривал 0

@Vladislav WebDev 327 / 217 / 97 Регистрация: 04.11.2012 Сообщений: 638
	01.04.2014, 12:31	12
	nikolc, т.е. вы скачали их с http://www.fonts-online.ru, потом перекачали их оттуда же или использовали уже установленные? попробуйте найти и скачать/подключить эти же шрифты с норм сервиса какого-нить, например с google fonts. Добавлено через 2 минуты И еще кстати кеш в браузере попробуйте очистить, может он в кеше уже лежат, битые. 0

@nikolc 1 / 1 / 0 Регистрация: 17.01.2014 Сообщений: 10
	01.04.2014, 12:45 [ТС]	13
	Suby, Во первых, шрифтов этих на google fonts нет Во вторых, если бы внимательно прочитали мое сообщение там была такая фраза "быстрому из интернета с fonts-online.ru", те шрифты которые были на компьютере и которые использовал для макетов скачивались с норм сервиса fonts.com В третьих, кеш браузера очищал в первую очередь Как Вариант конечно использовать Cufon, но из за некоторых особенностей работы Cufon мне не подходит. 0

@Vladislav WebDev 327 / 217 / 97 Регистрация: 04.11.2012 Сообщений: 638
	01.04.2014, 12:48	14
	nikolc, если не трудно, выложите скриншот с этими шрифтами в браузере где они работают и напишите оригинальное название шрифтов. 0

@nikolc 1 / 1 / 0 Регистрация: 17.01.2014 Сообщений: 10
	01.04.2014, 22:46 [ТС]	17
	Suby, да конвертить во все форматы и подрубать кучей, тоже пробовал, та же ерунда 0