Как правильно подключить шрифты в 1C-Битрикс и почему у меня не получается?

Question

[Artem_NoName]

Я совсем недавно начал развиваться в сфере разработки сайтов и ещё позднее начал работать с Битрикс.

Пытаюсь добавить пользовательские стили (в GoogleFonts такого стиля нет в целом) через загрузку файлов на сервер.

Вот мой код:

font-ntsomic.css (путь: /local/templates/мой-шаблон/font-ntsomic.css)

@font-face {
	font-family: 'NTSomic';
	font-style: normal;
	font-weight: 300;
	src:
		url('/local/templates/мой-шаблон/fonts/NTSomic-Regular.otf') format ('opentype'),
		url('/local/templates/мой-шаблон/fonts/NTSomic-Regular.ttf') format ('truetype'),
		url('/local/templates/мой-шаблон/fonts/NTSomic-Regular.woff') format ('woff');
}
@font-face {
	font-family: 'NTSomic';
	font-style: normal;
	font-weight: 400;
	src:
		url('/local/templates/мой-шаблон/fonts/NTSomic-Medium.otf') format ('opentype'),
		url('/local/templates/мой-шаблон/fonts/NTSomic-Medium.ttf') format ('truetype'),
		url('/local/templates/мой-шаблон/fonts/NTSomic-Medium.woff') format ('woff');
}
@font-face {
	font-family: 'NTSomic';
	font-style: normal;
	font-weight: 700;
	src:
		url('/local/templates/мой-шаблон/fonts/NTSomic-Bold.otf') format ('opentype'),
		url('/local/templates/мой-шаблон/fonts/NTSomic-Bold.ttf') format ('truetype'),
		url('/local/templates/мой-шаблон/fonts/NTSomic-Bold.woff') format ('woff');
}

Все шрифты находятся в папке fonts (путь: /local/templates/мой-шаблон/fonts/)

Само подключение (путь:/local/templates/мой-шаблон/мой-файл.css):

body
{
	font-family: NTSomic, sans-serif;
}

Нужна помощь, не могу понять, где я ошибся

Comments

[Ankhena]

Нужна помощь, не могу понять, где я ошибся

Для начала ошиблись форматом шрифтов.
otf и ttf это вообще очччень давно.
woff ещё моет потребоваться для старых сафари, если нужно их поддерживать.
Актуальный формат шрифтов - woff2
Если будете подключать и woff и woff2, то сначала woff2, потом woff.

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

Но наиболее вероятный это всё таки неверные пути.
Как решить:
1. Открываете dev tools, вкладку console и смотрите где браузер пытается искать файлы шрифтов.
2. Сравниваете с тем местом, где они действительно есть.
3. Корректируете путь.

Кириллицу лучше бы не использовать в путях.

[Artem_NoName]

Ankhena, формат подкорректировал

ошибки никакой не выдаёт (или может я просто не там смотрю, но в консоли показывает, что всё хорошо)

кириллицу не использую (поменял на нейтральный вариант для вопроса, в наименовании используются только латинские буквы и нижнее подчёркивание)

не до конца разобрался где именно смотреть, где браузер пытается искать файлы шрифтов (открыл console и там просто пусто, понять не могу)

[Ankhena]

Artem_NoName, ну давайте в угадайку...

1. Пишете кириллицей, шрифт не поддерживает кириллицу.
2. Просто криво конвертированный шрифт.
3. Не подключился css (закешировался, редактировали не тот файл, не отправили на сервер, отправили не на тот сервер и т.д.)
4. Шрифт переопределяется на какой-то другой после или специфичнее вызова в body.

Ещё что-нибудь ))

Вот нет, чтобы взять и дать ссылку на проблемное место и сэкономить время, главное себе.

[koder_1]

font-family: NTSomic, sans-serif;

Правильнее писать в кавычках нетиповые шрифты
font-family: "NTSomic", sans-serif;

[Ankhena]

koder_1,

Правильнее писать в кавычках нетиповые шрифты

Какие-то аргументы-доказательства этой "правильности" у вас есть?

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

[koder_1]

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

[Ankhena]

koder_1,

И плюс кроме браузеров сайты парсят и роботы яндекса и другие, и для них правильности разметки всё же плюс.

И какое же им дело до кавычек в названии шрифтов? И какое отношение шрифты имеют к разметке и роботам?

Думаю, лучше не писать заведомую ерунду.

[koder_1]

Ankhena, Например, зачем-то есть сервис валидации css, некоторые им проверяют...
Согласен, что именно стили мало кому нужны.

[Ankhena]

koder_1,

Например, зачем-то есть сервис валидации css, некоторые им проверяют...

Если валидатор, которым вы проверяете CSS не разрешает вам писать так
font-family: NTSomic, sans-serif;
или так
font-family: NT Somic, sans-serif;
могу лишь порекомендовать сменить сервис проверки на актуальный.

И повторю, я не говорю о кодгайдах и линтерах.

[Сергей delphinpro]

Artem_NoName,

не до конца разобрался где именно смотреть, где браузер пытается искать файлы шрифтов (открыл console и там просто пусто, понять не могу)

Консоль - Вкладка сеть. сверху есть кнопки фильтры. нажмите Шрифты, чтобы лишнего не было и перезагрузите страницу. Если ответ 200 - значит шрифт загружен браузером и проблема где-то в коде.

spoiler

[Александр Васильев]

кэш битрикса очисти, либо ошибки увидишь либо подключенные шрифты

[Андрей Николаев]

Artem_NoName, вы просто создали файл font-ntsomic.css в вашем шаблоне? А подключили его в header.php ?

[Михаил Ливач]

Андрей Николаев, вот тоже подумал.
Artem_NoName, в настройках Главного модуля снимите флажок "Объединять CSS файлы", сбросьте кэш, обновите страницу в публичной части и посмотрите по view-source или DevTools, что Ваш файл стилей подключается.

Answer 1

[Евгений]

Вы можете использовать относительный формат пути, относительно расположения css файла.

@font-face {
  font-family: "PT Sans";
  src: url("../fonts/PTSans-Regular.ttf");
}

body
{
  font-family: 'PT Sans', sans-serif;
}

Если используете сборщик, он может "поправить" путь на своё усмотрение в определенных случаях.
Лучше всего @font-face объявлять в самом верху, перед остальными стилями.
Пример рабочий, проверенный, из моего проекта.

Comments

[Ankhena]

Пример рабочий, проверенный, из моего проекта.

Вы реально в своём проекте используете ttf в 2025 году?
Да ещё и в таком виде, как указали, с двумя src?
И без указания жирности, стиля и т.д.?

И утверждаете, что это правильный код?

Исправьте, пожалуйста, код на корректный или удалите такой ответ, чтобы никого не вводить в заблуждение.

[Евгений]

Ankhena, да, потому что в стилях проекта не используется "жирность", и не вижу ни чего плохого в том чтобы использовать ttf, формат до сих пор поддерживается.

[Сергей delphinpro]

Евгений, шрифт в формате woff2 будет весить раза в три-четыре меньше.

[Ankhena]

Евгений, рекомендую всё же изучить разницу между форматами, позаботиться о пользователях и заменить на woff2. И уж точно никому не советовать подключать ttf.

потому что в стилях проекта не используется "жирность",

Ни заголовков ни стронгов?
Опять таки, для большинства проектов так не прокатит.

[Евгений]

Сергей delphinpro, используйте что хотите, ваше дело, вопрос не об этом был.

[Евгений]

Ankhena, это всё индивидуально, начиная с того что браузер сам может генерировать начертания, если это выглядит нормально, а sans-serif обычно выглядит нормально, почему бы и да. Во вторых можно использовать в качестве заголовков шрифты больших размеров, скажем, 200-300% от основного, вполне себе в тренде до сих пор. Ну ив третьих это не относится к вопросу, в качестве быстрой отладки можно такое использовать, на mdn именно такой пример именно с ttf шрифтом. А так, да, можете подключать сколь угодно шрифтов, всё зависит от нужд проекта и фантазии.

[Ankhena]

Евгений,

начиная с того что браузер сам может генерировать начертания

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

Во вторых можно использовать в качестве заголовков шрифты больших размеров, скажем, 200-300% от основного

Можно. Я лишь уточнила.

на mdn именно такой пример именно с ttf шрифтом

Да, статьи на MDN тоже устаревают.
Вы же ответ пишете сегодня.
И при этом, вводите людей в заблуждение уже по нескольким пунктам.
В том числе говорите, что нормально использовать тяжелый, плохо сжимаемый формат шрифта эпохи IE.

Ну ив третьих это не относится к вопросу

Указать на некорректность ответа, который не стоит использовать в реальной жизни очень даже относится к теме.

А вот ответ, если уж вы так ставите вопрос, очень вероятно, мало относится к теме, потому что при неверном пути были бы ошибки в консоли браузера. Но автор утверждает, что их там нет. Пока предположим, что не врёт.

[Евгений]

Ankhena, где я ввожу в заблуждение? Укажите где говорится о том что запрещено использовать ttf шрифты или это является ошибкой? В реальной жизни кто что хочет то и использует.

[Ankhena]

И всё это вместо того, чтобы в ответе заменить формат на актуальный и добавить свойства, чтобы им могли воспользоваться все интересующиеся.

А заодно улучшить ещё и свой проект.

[Ankhena]

Евгений,

где я ввожу в заблуждение?

Вот в том сообщении, на которое вы ответили, уже всё написала.
Ещё выше о преимуществах woff2 написал Сергей.

Собственно, woff2 это контейнер для того же ttf в том числе для эффективного сжатия. Если вам просто нравятся буквы ttf.

Вы можете привести вменяемые аргументы, почему упорно рекомендуете гонять по сети и грузить пользователям более тяжелый формат? Кроме идей "ну поддерживается же" и "никто не запрещал".

[Евгений]

Ankhena, я ни чего не рекомендую, это вы занимаетесь глупостями, как и большинство кураторов qna, сильно много "умничаете", по поводу того на чём не нужно заострять внимание, что не лучшим образом сказывается на аудитории авторов ответов. Ошибки в моем примере нет, не отнимайте время.

[Ankhena]

Евгений,

Вы можете привести вменяемые аргументы, почему упорно рекомендуете гонять по сети и грузить пользователям более тяжелый формат? Кроме идей "ну поддерживается же" и "никто не запрещал".

я ни чего не рекомендую, это вы занимаетесь глупостями...

Сильный аргумент, впечатлена.