Как использовать подключенный шрифт css

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

Почему-то не подключается конкретный шрифт в CSS. Пример рабочего кода:

font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-SemiBold.ttf'), url('fonts/Open_Sans/opensans-semibold-webfont.woff2') format('woff2'), url('fonts/Open_Sans/opensans-semibold-webfont.woff') format('woff'); font-weight: normal; font-style: normal;

А эта часть отказывется работать:

font-family: 'Poppins'; src: url('fonts/Poppins/Poppins-Medium.ttf') url('fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('fonts/Poppins/poppins-medium-webfont.woff') format('woff'), url('fonts/Poppins/Poppins-Medium.eot'); font-weight: normal; font-style: normal;

Уже конвертировал в разные форматы, проверял пути и т.д.
Что характерно, в режиме разработчика стиль отображается. Текст на латинице, так что конфликт с кириллицей отпадает.
Как видите, имеется рабочий шрифт, лежащий в соседней папке, и подключенный абсолютно таким же способом. И он работает.

Как использовать кастомные шрифты в вебе и не сойти с ума

Бывало ли так, что вы видите на веб-странице картинки и оформление, но не видите текста — он появляется на пару (десятков) секунд позже? Это загружаются кастомные веб-шрифты. Объясняем, почему это происходит и как этого избежать.

Классический вопрос на собеседовании ops-инженеров и программистов: вы написали в адресной строке браузера habr.com и нажали Enter. Что произойдет? (Ответ на 10 страницах)

Ок, мы указали для своего текста font-family: PFRegal, «Times New Roman». Что произойдет?

Браузер посмотрит, есть ли для PFRegal объявление font-face. Если оно есть, то начнется загрузка файла шрифта. Что будут видеть читатели те секунды (десятки секунд на 3G), пока происходит загрузка?

В Safari: ваш текст будет занимать на странице место, но останется прозрачным, то есть невидимым для читателя. Для расчета занимаемого пространства используется fallback font (стандартный шрифт, в нашем случае Times New Roman), об этом чуть ниже.

В Chrome и Firefox 3 секунды прозрачного текста, далее используется системный fallback font.

В IE сразу покажется fallback font.

IE не так уж и плох!

Все три подхода соответствуют стандарту: „in cases where textual content is loaded before downloadable fonts are available, user agents may render text as it would be rendered if downloadable font resources are not available or they may render text transparently with fallback fonts to avoid a flash of text using a fallback font.“

Как бороться с «прозрачным текстом» в Safari и Chrome?

Есть несколько способов:

Сделайте отдельный css-файл с инлайном шрифта, подключайте его после html кода с текстом.

Теперь оно моргает при рефреше!

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

Мы в Медузе оптимизируем главную страницу для людей, открывающих ее по закладке в браузере: первое открытие медленное, последующие — мгновенные без моргания. Страницы материалов в основном открываются из соцсетей на телефонах, где кеша нет, и мы оптимизируем время появления текста на экране при первой загрузке.

Важно не забыть некоторые системные вещи:

Как проверить, что все работает нормально? У меня слишком быстрый интернет

Возможность сэмулировать плохой интернет. Good 3G — наш выбор для отладки Медузы

Сброс кеша по правой кнопке мыши (работает только если открыты Developer Tools)

А также суперзнание, как заблокировать загрузку определенного адреса или даже маску адресов в Хроме: включите Developer Tools Experiments в chrome://flags → Откройте Chrome Developer Tools → Настройки (спрятаны в трех точках в правом верхнем углу) → Experiments → Нажмите Shift 6 раз → Поставьте галочку Request blocking.

Теперь вы можете сделать вот так

Для отладки в Desktop Safari потребуется установить Network Link Conditioner (для скачивания необходим Apple Developer Account). Для отладки iOS Safari и iOS Webview используйте Network Link Conditioner в настройках вашего устройства (Settings → Developer → Network Link Conditioner). Учтите, настройки ограничения скорости применятся на всю систему, а не только на Safari.

Как насчет нового стандарта?

Всегда пожалуйста. Вот свойство font-display, доступное в Chrome Canary. Оно решает все проблемы, перечисленные в статье. Ещё года 2–3 и можно будет вздохнуть спокойно.

Я перфекционист, есть ли что еще улучшить?

Конечно! Сожмите файл шрифта, настроив его под себя. Вырежьте глифы, которые вы не используете в текстах (у Регала их по умолчанию более 800). Отключите лишние Open Type Features. Для всего этого вам потребуется специальный софт [1], [2] или [3] и понимание того, как устроены шрифты.

Вывод?

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

Веб-разработка
Программирование
Тестирование веб-сервисов

MagentaWAVE

Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.

12 февраля 2016

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

Дорожный знак 100 на дороге уходящей в даль

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

Два наиболее популярных ресурса это Font Awesome и Fontello, первое(и главное) — они бесплатны; второе — Font Awesome — предоставляет публичную ссылку для прямой загрузки шрифта со своего хостинга, то есть не нужно использовать свой или искать сторонний хостинг для размещения необходимых файлов, в Fontello можно собрать свой собственный шрифт, загружая на сайт иконки в .svg формате, или выбрать из общего набора именно те, которые нужны в данном случаи, а не загружать всё что есть.

Как подключить иконочный шрифт к сайту

Способов подключения на данный момент существует три:

1. Если доступна, использовать общую(публичную) прямую ссылку на хостинг сервиса, которую нужно разместить внутри раздела , лучше повыше или перед закрывающим , это уже как пойдет.
Для Font Awesome последняя версия ссылки выглядит так:

2. Скачать архив со всеми необходимыми файлами, извлечь содержимое папок CSS и Fonts, разместить извлеченные файлы на хостинге своего сайта в соответствующие папки и указать на них ссылки в секции . вашего сайта следующим образом —

— дать путь только к папке:

— удаленно подключить файлы с CSS из соответствующей папки:

3. После загрузки архива с фалами, извлечь только содержимое папки Fonts и подключить иконочный шрифт, используя правило CSS @font-face:

@font-face <
font-family: ‘fontello’;
src: url(‘..путь-к-файлу/fontello.eot‘);
src: url(‘..путь-к-файлу/fontello.woff‘) format(‘woff’),
url(‘..путь-к-файлу/fontello.ttf‘) format(‘truetype’),
url(‘..путь-к-файлу/fontello.svg#fontello‘) format(‘svg’);
font-weight: normal;
font-style: normal;
>

Как использовать иконочный шрифт на сайте

У каждого выбранного символа есть название и код, посмотреть их можно как на странице официального сайта, так и на демо странице из загруженного архива. Название, по совместимости, является так же и добавочным классом элемента, для которого нужна иконка, код используется как UTF-символ иконки. Способы добавления символов на страницу зависят от варианта подключения шрифта.

Если воспользоваться вторым вариантом — подключить шрифт используя CSS-файлы, возможно добавление знаков как с помощью класса, так и кода:

1. Создать пустой элемент с классом иконки и добавить его перед нужным блоком:

2. Добавить класс с названием символа к нужному элементу:

3. Добавить в CSS псевдоэлемент для элемента с иконкой, который будет содержать UTF-код желаемого символа и указывать на используемый шрифт (в данном примере — Fontello):

ul li a::before <
content: ‘\e80a‘;
font-family: «fontello»;
font-style: normal;
font-weight: normal;
>

Если для подключения шрифта иконок использовать третий вариант — только файлы шрифтов, то для того, чтобы можно было добавлять иконки по средствам присвоения соответствующего класса-названия, в CSS нужно внести дополнительную конструкцию устанавливающую подключенный шрифт для этих элементов и для каждого указать относящийся к нему символ:

[class^=»icon-«]::before,
[class*=» icon-«]::before font-family: «fontello»;
font-style: normal;
font-weight: normal;
>
.icon-doc-inv::before content: ‘\e801‘;
>
.icon-mail-alt::before content: ‘\e805‘;
>

но можно обойтись и без нее, запись вида:

— будет работать все равно.