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

Евгений,

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

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

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

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

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

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

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

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

koder_1,

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

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

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

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

Евгений,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

koder_1,

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

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

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

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

koder_1,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как соединить кнопку и форму вместе?

Да, убрать пробел это, конечно, решение, но начать с того, что ненадёжное.

Что имеет смысл сделать:
1. Форму верстать тегом form
2. Кнопку отправки тегом button с type="submit"
Это чтобы получить минимальную правильную начальную функциональность и заодно, семантику.
3. Форме задать display flex или grid.
Тогда вид перестанет зависеть от разметки (наличия пробела)

p.s.

placeholder="Enter your email"

Вы путаете плейсхолдер и label. Загуглите разницу.
"Enter your email" это label - подпись поля.
А placeholder должен выглядеть как-то так [e-mail]

Yandex не индексирует изображения на сайте, почему?

Сложно сказать почему конкретно.
Но я бы начала с избавления от переспама в title/alt и заодно от двойных расширений webp/img/small/5.jpg.webp

Как поменять цвет линии при нажатии?

ZinadinZidan10,

он показывает только до нажатия.

Вот, инспектор показывает цвет полосок прямо сразу, без наведения или других фокусов.

spoiler

Но всё таки имеет смысл использовать галку hover в devtools.
Потому что происходит интересное: если при наведении только показывать полоски и всё, то они будут и визуально серыми.
Но к картинкам применен эффект прозрачности, а это создает новый контекст наложения (гуглится) и меняется z-index => полоски попадают ПОД полупрозрачную картинку и кажется, что их цвет меняется.

Как реализовать выдвигающийся из айтема блок(при нажатии на плюс)?

Может есть какой то плагин ?

Плагин для чего?
Для flex-shrink/flex-grow?
Ну не смешите.

Также можете анимировать grid-template-columns. Но значения должны быть численными. Min-content или auto не станут анимироваться.

Как сделать чтобы блок с border-dashed постепенно заполнялся border-solid?

По мотивам, например, вот этого https://codepen.io/sfi0zy/pen/bGMOzqa

Как выровнять текст и картинку внутри ссылки?

oksana_melikhova,

Если таким образом, то видимого эффекта так же нет, к сожалению

Проверяйте подключение стилей, кэш и т.д., потому что оно не может не дать эффекта. Либо в коде есть что-то ещё, что перебивает.

Здоровый вариант:
Убрать из кода картинку, заменить на фон или псевдоэлемент. Вероятнее второе, чтобы удобнее было работать с тенью.
Нечего этой картинке делать в разметке, да ещё и с таким альтом.
А потом всё равно флексом, как написано в комментариях выше.

Изменение поведения CKEditor5?

Что-то типа config.autoParagraph = false;, проверяйте по актуальной документации

Как компилировать несколько scss файлов сразу?

не в один файл как в gulp

Если что, галп не заставляет компилировать в один файл. Как напишете, так и будет компилировать.

Как сделать расстояние между блоками в HTML фиксированным?

Для начала ответьте на вопрос, зачем тут fixed? Не мне, себе самому.
Абсолюты и фикседы ничего не знают друг о друге, поэтому именно отступа между ними вообще быть не может.

Но попробуйте вспомнить геометрию, если нужно поставить кнопку впритык к меню, а ширина меню 13vw, то очевидно, что левая позиция кнопки тоже должна быть 13vw.
Альтернативный вариант: сложить кнопку внутрь shapka (по дороге переименовав shapka в header или nav, чтобы не стыдно было) и прибить абсолютом с left 100%.

Ещё немножко нюансов:
1. В 2025 году делать кнопки инпутами с типом image даже сложно назвать извращением. Рекомендую узнать о теге button, всё заметно упростится.
2. Две кнопки тут тоже, по всей видимости, не нужны, вполне достаточно одной.
3. Пока по виду кажется, что всё это можно сделать гридами вместо фикс меню. Благо ширина колонок уже вполне хорошо анимируется без костылей.

Почему неправильно работают подсказки?

Стрелочками-то выбрали, что нужно?