Кастомные шрифты на сайте

@Mikhail Shell · Регистрация: 15.11.2014

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

Недавно прорабатывая разные детали на своем сайте я столкнулся с проблем кастомных шрифтов. Вопрос следующий: каким способом можно сделать загрузку кастомных шрифтов приятной, без скачков и пустых блоков с текстом?
Решение нашел на этом сайте: artgorbunov.ru/bb/soviet/20121129/.
Но я не врубаюсь что может быть у меня не так.
Вот css, который должен отвечать за подключение и вывод шрифтов:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@font-face {
    font-family:Roboto Sans Condensed;
    src:url(data:application/x-font-woff;charset=utf-8;base64,d09GRgля ля ля) format('woff');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:Roboto Sans Condensed;
    src:font-url(fonts/main_fonts/roboto_condensed/roboto_condensed.eot);
    font-weight:normal;
    font-style:normal;
}
*{
    margin:0pt;
    padding:0pt;
    outline:none;
    border:none;
    text-decoration:none;
    font-family:Roboto Sans Condensed, sans-serif;
    max-height:999999pt;
}

Но мало того что они не выводятся приятно, они вообще никак не выводятся.
Подскажите пожалуйста, что может быть не так и что надо исправить!

@Shakalaka · 09.08.2015, 12:25

Сообщение от Mikhail Shell

Но мало того что они не выводятся приятно, они вообще никак не выводятся.

Ну как минимум - "Roboto Sans Condensed" должен быть в кавычках.

@Mikhail Shell · 09.08.2015, 14:00 **[ТС]**

Shakalaka, теперь шрифт не работает с кириллицей.

@Shakalaka · 09.08.2015, 17:54

Сообщение от Mikhail Shell

теперь шрифт не работает с кириллицей.

А до этого работал?) Откуда я могу знать какой вы шрифт скачали, и закодировали в base64

@Mikhail Shell · 09.08.2015, 19:40 **[ТС]**

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

А до этого работал?

Да работал.
Файл со шрифтом woff и eot во вложениях.

@Shakalaka · 10.08.2015, 09:34

Mikhail Shell, special for you... Закодировал в base64 все работает...

@Mikhail Shell · 10.08.2015, 14:43 **[ТС]**

Большое спасибо!
Но я заметил что этот эфффект пропадает только в ie. Например в webkit браузерах (chrome, rambler) и в mozilla происходит следующее.
При загрузке остаются дыры как бы подразумевающие "невидимый" текст на месте этих дыр, а затем он появляется. И такая же вещь проявляется изредка при обновлении страницы.
Скажите пожалуйста, можно ли это решить так, чтобы этой ерунды не было при загрузке не было как в ie (я сейчас там такого нет) или вообще я зря борюсь с этим всем и эти дыры должны как то появляться!

@Shakalaka · 10.08.2015, 15:04

Сообщение от Mikhail Shell

При загрузке остаются дыры как бы подразумевающие "невидимый" текст на месте этих дыр

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

@Mikhail Shell · 10.08.2015, 15:28 **[ТС]**

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

Честно говоря, не очень понятно о чем вы.

На скриншоте, который я прикрепил есть два оранжевых пустых блока и один белый с картинкой внутри. Так вот в этих пустотах (в блоках) должен быть текст украшенный font face'ом, но при загрузке он как бы невидимый, и лицезреть можно только то пространство, что должно быть отведено текстовому содержимому.

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

прелоадер

А что это такое? Что за прелоадер?

@Shakalaka · 10.08.2015, 15:36

Сообщение от Mikhail Shell

А что это такое?

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

@Mikhail Shell · 11.08.2015, 12:07 **[ТС]**

Спасибо за совет!
Но все таки хочу спросить еще раз, потому что что-то не очень к душе было решение с прелоадером.
Можно ли это решить так, чтобы этой ерунды не было при загрузке не было как в ie (я сейчас там такого нет) или вообще я зря борюсь с этим всем и эти дыры должны как то появляться!

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .

@Mikhail Shell 52 / 52 / 39 Регистрация: 15.11.2014 Сообщений: 696
	09.08.2015, 14:00 [ТС]
	Shakalaka, теперь шрифт не работает с кириллицей. 0

@Mikhail Shell 52 / 52 / 39 Регистрация: 15.11.2014 Сообщений: 696
	10.08.2015, 14:43 [ТС]
	Большое спасибо! Но я заметил что этот эфффект пропадает только в ie. Например в webkit браузерах (chrome, rambler) и в mozilla происходит следующее. При загрузке остаются дыры как бы подразумевающие "невидимый" текст на месте этих дыр, а затем он появляется. И такая же вещь проявляется изредка при обновлении страницы. Скажите пожалуйста, можно ли это решить так, чтобы этой ерунды не было при загрузке не было как в ie (я сейчас там такого нет) или вообще я зря борюсь с этим всем и эти дыры должны как то появляться! 0

@Mikhail Shell 52 / 52 / 39 Регистрация: 15.11.2014 Сообщений: 696
	11.08.2015, 12:07 [ТС]
	Спасибо за совет! Но все таки хочу спросить еще раз, потому что что-то не очень к душе было решение с прелоадером. Можно ли это решить так, чтобы этой ерунды не было при загрузке не было как в ie (я сейчас там такого нет) или вообще я зря борюсь с этим всем и эти дыры должны как то появляться! 0