Как загрузить шрифт в css

Как загрузить шрифт в CSS.

Каждому веб-мастеру хочется чтобы его сайт выглядел по особеному, частично эту проблему можно решить методом загрузки каких-то эксклюзивных шрифтов, но они на то и эксклюзивны, что установленны только у единичных пользователей, все остальные вашу красоту не увидят если только вы этот шрифт не выложили у себя на сервере.
Все пользовательские агенты можно разделить на 3 категории:
1) Неподдерживающих CSS.
2)Поддеривающих CSS-1, но не поддерживающих CSS-2 и CSS-3
3)Поддеривающих CSS-1, CSS-2 и CSS-3
Теперь начнем разбираться, загрузка шрифта в каскадных таблицах стилей началась в CSS-1 методом local, т.е. , если имя шрифта имеет пробелы то такие инена нужно помещать в кавычки
В CSS-2 и CSS-3 методы изменились на , что позволило вылаживать свои шрифты выкладывать на сервер и уже потом его использовать в веб-страницах.

Чтобы использовать внешние шрифты нужно проделать два шага:
1)загрузить шрифт браузером:
@font-face font-family:»VivaldiD»;
src: lokal(«C/windows/font/VivaldiD.ttf»), url(«VivaldiD.ttf»)
format(«truetype»);
>
для загрузки шрифта нужно использовать АТ-правлило (@font-face), в конструкции которого нужно определить имя шрифта font-family:, потом при помощи дескриптора src: указать путь локального расположения шрифта, для П.А. поддерживающих только CSS-1, а потом через запятую указать путь для браузеров поддерживающих CSS-2 и CSS-3 и при необходимости указывается формат(format) шрифта.
Для CSS-2 и CSS-3 путь может быть как абсолютным так и относительным. По поводу форматов значения зависят от расширения файла шрифта, мой пример имеет расширение ttf, т.е. TrueTypeFont, значит его формат truetype, есть и другие расширения, а занчит и другие форматы. Задавать формат не обязательно, но есть ситуации когда в пути к шрифту не указывается расширение, тогда формат играет одну из ключевых ролей.
Если в имени файла(шрифта) есть пробелы и даже если путь помещен в кавычках, то браузер InternetExplore его не загружает, можно конечно переименовать шрифт но каким это боком вылезет остается только догадываться.
2)Прописать шрифт нужному элементу, т.е. установить шрифт при помощи font-family: нужному селектору:
BODY
На тот случай если шрифт не удалось загрузить нужно указать его категорию в моем примере serif.
3)При загрузке шрифта нужно указывать типы носителей для которых написаны правила, например загружать шрифты нужно визуальным браузерам(screen) или принтерам(print), а для невизуальных(например звуковых браузеров) бесполезно, вот для этих целей тегу STYLE присваивается атрибут MEDIA принимающего в качестве значний один или список типов носителей.

Смотрите также:

Без образования в жизни ничего не добьешься

Сельский офис

Когда папа программист

Как изменить шрифт на сайте

От автора: приветствую вас на webformyself. Информация – это то, ради чего мы все используем интернет. Хорошо подобранный шрифт позволяет лучше воспринимать текстовую информацию, что увеличивает лояльность людей к какому-то ресурсу. Давайте сегодня разбираться, как изменить шрифт на сайте.

Как менять параметры

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

Такие параметры меняются с помощью css-свойств для работы с текстом. Подробно о них вы можете узнать из нашего учебника по css для новичков.

Как менять шрифты

А мы переходим к нашему главному на сегодня вопросу. Для таких изменений вам потребуется опять же знания css хотя бы на базовом уровне. Чтобы изменить шрифт, необходимо написать для нужного нам элемента свойство:

font — family : название ;

Например, если менять вы хотите для всего сайта, то нужно искать в таблице стилей (обычно style.css) селектор body. Обычно у него задано несколько шрифтов. Тот, что стоит самым первым после двоеточия и будет использоваться в первую очередь. Если по каким-то причинам его не получилось загрузить, браузер выберет второй и так до тех пор, пока не будет найден шрифт, который доступен для использования в данный момент.

Вы должны знать, что существуют так называемые стандартные шрифты, которые есть на любой OC и их можно использовать без всяких страхов. Например, это Arial, Times New Roman, Tahoma и т.д. Для еще большей надежности после указания конкретного названия через запятую можно указать семейство шрифтов. В этом случае, если выбранное начертание не доступно, браузер выберет первый оптимальный из семейства.

font — family : Arial , «Times New Roman» , sans — serif ;

В этом примере сначала будет подставлен шрифт Arial. Если он найден, то именно он будет использоваться. Если нет, то браузер будет искать Times New Roman. Кстати, обратите внимание на то, что если название шрифта состоит из нескольких слов. Его нужно заключать в двойные кавычки.

Через запятую мы указали семейство шрифтов “без засечек”. На всякий случай. Также существуют такие: serif (с засечками), cursive (курсивные), monospace (моноширинные), fantasy (декоративные). Каждое семейство для своих целей. Например, основной шрифт для чтения информации лучше выбирать без засечек.

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

Как загрузить новый шрифт на сайт?

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

Собственно, способов добавить новые шрифты на сайт я вижу два:

Использовать сервис Google Fonts. Тут вы можете выбрать понравившийся шрифт и очень быстро подключать его к сайту. В таком случае никаких дополнительных папок вам подключать не нужно – все будет грузиться из хранилища сервиса, но при этом немного будет уменьшаться скорость загрузки. Поэтому я и не советую вам подключать слишком много. Максимум – 3-4 шрифта.

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

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

После этого вы можете использовать шрифт через font-face, сервис подскажет вам, как правильно писать его название.

Способ второй: Закачать на сайт и подключить через @font-face. В css есть специальный синтаксис, который позволяет подключить новые шрифты. Для этого их сначала нужно закачать в какую-нибудь директорию на вашем сайте. Я советую создать новую – fonts. Также такая директория уже может быть у вас, тогда просто скидываем в нее папку с файлами. Где ее взять? Ну конечно, качаем все нужные шрифты в интернете, где же еще.

Хотел бы отметить, что для кроссбраузерного отображения, файл должен быть как минимум в нескольких форматах. А именно, ttf, woff, eot. На скриншоте вы можете увидеть типичный пример подключения:

Самое главное, указать имя, а также путь ко всем доступным форматам с помощью свойства src через запятую.

Теперь везде, где нужно поставить этот шрифт, просто копируем строчку с font-family и ставим. Разумно будет дописать пару более простых шрифтов через запятую.

Размер и другие параметры

Ну а как изменить размер шрифта на сайте? За это отвечает свойство font-size и ему можно указывать значения в пикселах, относительных единицах em, процентах и других единицах. Хорошим тоном веб-разработки считается задание размеров в относительных единицах, что текст смотрелся максимально читабельно при различных настройках размера шрифта.

То есть для тела страницы задается font-size: 100%, а всем остальным элементам он задается в относительных единицах em. Например, если вы хотите, чтобы заголовки первого уровня были в 3 раза больше обычного размера текста на странице, пропишите:

@font — face

Встроенных в операционные системы шрифтов часто не хватает для создания уникального дизайна сайта. Для подключения нестандартных шрифтов существует директива @font — face . С её помощью можно подключить и использовать на странице любой шрифт из файла.

При загрузке сайта браузер будет брать шрифт из указанного файла и отображать текст именно этим шрифтом.

Пример

Скопировать ссылку «Пример» Скопировано

Подключим к странице шрифт Lexend Peta и сделаем его основным шрифтом нашего сайта.

@font-face font-family: "Lexend Peta"; src: local("Lexend Peta Regular"), local("LexendPeta-Regular"), url("Lexend_Peta-webfont.woff2") format("woff2"), url("Lexend_Peta-webfont.woff") format("woff"), url("Lexend_Peta-webfont.svg") format("svg"); font-weight: normal;> body font-family: "Lexend Peta", sans-serif;> @font-face font-family: "Lexend Peta"; src: local("Lexend Peta Regular"), local("LexendPeta-Regular"), url("Lexend_Peta-webfont.woff2") format("woff2"), url("Lexend_Peta-webfont.woff") format("woff"), url("Lexend_Peta-webfont.svg") format("svg"); font-weight: normal; > body font-family: "Lexend Peta", sans-serif; >

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Директива @font — face по своей «анатомии» отличается от стандартных CSS-правил, где есть селектор и применяемые к нему правила. Основное отличие в том, что на месте селектора мы активируем функцию, адресованную браузеру.

Внутри этого правила должно быть два обязательных свойства:

Название шрифта, которое мы будем использовать ниже в CSS: свойство font — family . Название может отличаться от настоящего названия этого шрифта.

Ссылки на файлы, из которых браузер может взять шрифт: свойство src .

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

Подключение из внешних файлов происходит при помощи конструкции url ( «ссылка — на — файл» ) . Несколько файлов можно подключить, перечислив эти конструкции несколько раз через запятую.

Если указаны ссылки на несколько файлов в разных форматах, то после url ( ) оставляют браузеру подсказку в виде записи format ( «формат — подключаемого — файла» ) .

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

Для этого в качестве одного или нескольких значений у свойства src можно указать конструкцию local ( «имя — шрифта — в — системе» ) . Нужно указывать локальные названия до ссылок на внешние файлы, чтобы браузер, найдя шрифт в системе под таким именем, даже не пошёл загружать и читать внешние файлы.

На сайте может использоваться один и тот же шрифт, но в разных начертаниях. Например, жирный font — weight : bold или курсив font — style : italic . В этом случае вам нужно будет подключить разные файлы, содержащие эти начертания.

Тут есть два подхода.

Первый — использовать разные @font — face для подключения разных начертаний шрифта, называя их разными именами. Например, » Lexend Peta Regular» , » Lexend Peta Bold» и » Lexend Peta Italic» . Выглядеть это будет так:

@font-face font-family: "Lexend Peta Regular"; src: local("Lexend Peta Regular"), local("LexendPeta-Regular"), url("Lexend Peta-webfont.woff2") format("woff2"), url("Lexend Peta-webfont.woff") format("woff"), url("Lexend Peta-webfont.svg") format("svg");> @font-face font-family: "Lexend Peta Bold"; src: local("Lexend Peta Bold"), local("LexendPeta-Bold"), url("Lexend Peta Bold-webfont.woff2") format("woff2"), url("Lexend Peta Bold-webfont.woff") format("woff"), url("Lexend Peta Bold-webfont.svg") format("svg");> @font-face font-family: "Lexend Peta Italic"; src: local("Lexend Peta Italic"), local("LexendPeta-Italic"), url("Lexend Peta Italic-webfont.woff2") format("woff2"), url("Lexend Peta Italic-webfont.woff") format("woff"), url("Lexend Peta Italic-webfont.svg") format("svg");> @font-face font-family: "Lexend Peta Regular"; src: local("Lexend Peta Regular"), local("LexendPeta-Regular"), url("Lexend Peta-webfont.woff2") format("woff2"), url("Lexend Peta-webfont.woff") format("woff"), url("Lexend Peta-webfont.svg") format("svg"); > @font-face font-family: "Lexend Peta Bold"; src: local("Lexend Peta Bold"), local("LexendPeta-Bold"), url("Lexend Peta Bold-webfont.woff2") format("woff2"), url("Lexend Peta Bold-webfont.woff") format("woff"), url("Lexend Peta Bold-webfont.svg") format("svg"); > @font-face font-family: "Lexend Peta Italic"; src: local("Lexend Peta Italic"), local("LexendPeta-Italic"), url("Lexend Peta Italic-webfont.woff2") format("woff2"), url("Lexend Peta Italic-webfont.woff") format("woff"), url("Lexend Peta Italic-webfont.svg") format("svg"); >

Далее, ниже по коду, используем в разных местах разные начертания шрифтов:

body font-family: "Lexend Peta Regular", sans-serif;> .title font-family: "Lexend Peta Bold", sans-serif;> .accent font-family: "Lexend Peta Italic", sans-serif;> body font-family: "Lexend Peta Regular", sans-serif; > .title font-family: "Lexend Peta Bold", sans-serif; > .accent font-family: "Lexend Peta Italic", sans-serif; >

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

Говорим браузеру, что эти файлы используем для нормального начертания:

@font-face font-family: "Lexend Peta"; src: local("Lexend Peta Regular"), local("LexendPeta-Regular"), url("Lexend Peta-webfont.woff2") format("woff2"), url("Lexend Peta-webfont.woff") format("woff"), url("Lexend Peta-webfont.svg") format("svg"); font-weight: normal;> @font-face font-family: "Lexend Peta"; src: local("Lexend Peta Regular"), local("LexendPeta-Regular"), url("Lexend Peta-webfont.woff2") format("woff2"), url("Lexend Peta-webfont.woff") format("woff"), url("Lexend Peta-webfont.svg") format("svg"); font-weight: normal; >

Говорим браузеру, что эти файлы используем для жирного начертания:

@font-face font-family: "Lexend Peta"; src: local("Lexend Peta Bold"), local("LexendPeta-Bold"), url("Lexend Peta Bold-webfont.woff2") format("woff2"), url("Lexend Peta Bold-webfont.woff") format("woff"), url("Lexend Peta Bold-webfont.svg") format("svg"); font-weight: bold;> @font-face font-family: "Lexend Peta"; src: local("Lexend Peta Bold"), local("LexendPeta-Bold"), url("Lexend Peta Bold-webfont.woff2") format("woff2"), url("Lexend Peta Bold-webfont.woff") format("woff"), url("Lexend Peta Bold-webfont.svg") format("svg"); font-weight: bold; >

Говорим браузеру, что эти файлы используем для курсива:

@font-face font-family: "Lexend Peta"; src: local("Lexend Peta Italic"), local("LexendPeta-Italic"), url("Lexend Peta Italic-webfont.woff2") format("woff2"), url("Lexend Peta Italic-webfont.woff") format("woff"), url("Lexend Peta Italic-webfont.svg") format("svg"); font-style: italic;> @font-face font-family: "Lexend Peta"; src: local("Lexend Peta Italic"), local("LexendPeta-Italic"), url("Lexend Peta Italic-webfont.woff2") format("woff2"), url("Lexend Peta Italic-webfont.woff") format("woff"), url("Lexend Peta Italic-webfont.svg") format("svg"); font-style: italic; >

После этого используем в разных местах разные начертания шрифтов:

body font-family: "Lexend Peta", sans-serif; font-weight: normal;> .title font-weight: bold;> .accent font-style: italic;> body font-family: "Lexend Peta", sans-serif; font-weight: normal; > .title font-weight: bold; > .accent font-style: italic; >

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Важно, чтобы файлы со шрифтами лежали на том же домене, что и сайт, на котором они используются. Если вы захотите обратиться к шрифтам из другого домена, то подобный запрос будет заблокирован по правилам безопасности запросов с разными источниками (CORS).

�� @font — face нужно объявлять до того, как вы обратитесь в CSS к этому шрифту. Принято подключать шрифты в самом начале файла стилей (но после всех @import ).

�� @font — face нельзя объявить внутри другого CSS-правила.

�� Важно использовать в точности то название подключённого шрифта, которое вы задаёте внутри @font — face . Иначе магия не сработает.

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

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

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

Держите проверенные конверторы:

Font Converter

Online @font-face generator

�� Советую всегда проверять, есть ли шрифт на сайте гуглового сервиса Google Fonts. Если найдёте, то останется только проставить нужные стили шрифта и подключить одной строкой вместо кучи @font — face . Ах, чудный идеальный мир, где все дизайнеры используют только бесплатные шрифты ��‍♀️

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

Как добавить шрифт из google fonts в tilda

Переходим в Настройки сайта — Шрифты и цвета — Расширенные настройки.
Выбираем вкладку Your Own Fonts.

Здесь Тильда предлагает загрузить имеющиеся у Вас файлы шрифтов обязательно в формате WOFF. Обратите на это внимание.

Кроме того, есть возможность в поле CSS LINK указать ссылку на файл стилей в том случае, если Ваши шрифты находятся где-то на другом сервере, хостинге, и в саму Тильду Вы их загружать не планируете. А просто хотите подключить к сайту этот указанный сторонний файл стилей.

Предполагаем, что Вы уже заранее подготовили необходимые файлы, скачав их с одного из сервисов, предлагающих бесплатные или платные наборы шрифтов. Если нет, то сделайте это, воспользовавшись поиском в Яндексе или Гугле с поисковой фразой типа Скачать шрифты. Это просто. Даже если у Вас файлы в другом формате, ничего страшного, Тильда предложит инструкцию по их конвертации в необходимый формат. Это видно на картинке ниже.

Итак, нажимаем на кнопку Загрузить файлы шрифта, видим окошко, в котором нужно последовательно подгрузить шрифты для каждого начертания (толщины шрифта).

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

В момент загрузки шрифтов Вы также можете указать название шрифта. Тут оно одно. Несколько указать невозможно, ну ничего с этим не поделать. Впрочем, не страшно, — мы ведь запомнили в какое начертание и какой шрифт загрузили)) Даже если забыли, ничего страшного, в процессе написания сайта поиграетесь подбором шрифта и найдете нужный Вам.

Также здесь сразу можете назначить загруженный шрифт для заголовков или для текста. А может, и не надо, если у нас несколько шрифтов.

Сохраняете. Готово.
Используйте свои собственные шрифты в работе.

Спасибо, что дочитали статью до конца! Надеюсь, была полезна.
Желаю Вам успехов в Вашем творчестве!

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

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

Сразу стоит отметить, что самый простой вариант — вообще не подключать сторонние шрифты и пользоваться стандартными, которые предустановлены в большинстве операционных систем. Это хорошо знакомые Arial, Times New Roman и так далее — эти шрифты называются веб-безопасными, достаточно просто указать название одного из таких шрифтов в коде, и всё будет работать.

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

Для начала стоит выбрать правильный формат шрифта. TTF и OTF — форматы, которые предоставляются с минимальным сжатием или совсем без него. Их стоит использовать только в том случае, если нужна поддержка очень старых браузеров. Во всех остальных ситуациях можно выбрать WOFF и WOFF2 — форматы, которые отличаются высокой степенью сжатия. WOFF2 — усовершенствованная версия предшественника, этот формат можно считать лучшим из существующих. Тем не менее, поддержка WOFF2 хотя и очень хорошая, но пока не абсолютная, поэтому в качестве подстраховки для не самых современных браузеров стоит использовать WOFF.

Подключение шрифтов с помощью Google Fonts

Есть простой и удобный способ подключить нестандартный шрифт — использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в ссылку, которую сгенерирует Google Fonts во вкладке Embed.

Этого достаточно, чтобы шрифт подключился. Теперь его можно использовать в свойстве font-family без каких-либо дополнительных действий.

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

Плюсы этого способа — простота использования и всегда актуальные версии шрифтов, Google Fonts их часто обновляет. Но у него есть и минус — запросы к сторонним серверам могут негативно повлиять на скорость загрузки страницы. Если выбираете этот способ, стоит обратить внимание на оптимизацию.

Подключение шрифтов с помощью правила @font-face

Есть альтернативный способ, при котором файлы со шрифтами хранятся вместе с остальными ресурсами сайта. Для них принято заводить отдельную директорию в корне проекта — например, fonts . В неё следует поместить файлы для каждого начертания в нужных форматах — в большинстве случаев, если не требуется поддержка старых браузеров, подойдут .woff и .woff2 , о которых мы говорили ранее. Шрифты можно скачать на различных ресурсах. При этом всегда нужно обращать внимание на лицензию — некоторые шрифты могут быть недоступны для коммерческого использования.

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

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

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

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

Начертания: жирное, курсивное и так далее. Для каждого начертания нужно отдельное правило @font-face .

Базовый вариант правила:

Для улучшения производительности правило @font-face лучше всего прописывать в самом начале CSS-файла. Так браузер сможет раньше начать обработку шрифта.

Оптимизация

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

FOIT, FOUT и FOFT

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

FOIT (Flash of Invisible Text) — с англ. «мелькание невидимого текста». При таком поведении, пока шрифт не загрузится, текст не отображается и появляется только после загрузки шрифта. Значительная проблема — во время загрузки нет доступа к текстовому контенту.

FOUT (Flash of Unstyled Text) — с англ. «мелькание неоформленного текста». Во время загрузки используется шрифт, заданный по умолчанию (системный, например), а после загрузки страница перерисовывается с использованием загрузившегося шрифта. Эта перерисовка довольно заметна и может быть нежелательна.

FOFT (Flash of Faux Text) — с англ. «мелькание синтезированного текста». Это поведение можно наблюдать в промежутке, когда основное начертание уже загрузилось, а дополнительные (жирное, курсивное и так далее) — нет. Браузер имитирует нужное начертание до загрузки настоящей версии. В этом случае страница может перерисовываться несколько раз по мере загрузки начертаний.

В разных браузерах логика рендеринга текста во время загрузки шрифта отличается. Например, Chrome и Firefox в течение трёх секунд не отрисовывают ничего, затем используют веб-безопасный шрифт, а после окончания загрузки текст перерисовывается. IE поступает похоже, но при этом не ждёт три секунды. Подобное поведение в разных браузерах можно унифицировать, используя свойство font‑display .

Свойство font-display

У свойства есть несколько значений, которые определяют поведение текста во время загрузки шрифта:

auto — поведение по умолчанию, зависит от браузера.

block — текст не отображается в течение короткого периода (3 секунды), затем отрисовывается запасной шрифт, если основной ещё не загрузился. Как только загрузка завершается, текст перерисовывается снова.

swap — сразу же отрисовывается запасной шрифт, после загрузки шрифта — повторный рендеринг.

fallback — в течение очень короткого периода (100 миллисекунд) не отображается ничего, затем браузер использует запасной шрифт и ждёт 3 секунды — если шрифт всё ещё не загрузился, остаётся запасной шрифт. Далее не важно, загрузился шрифт или нет, замена не произойдёт. Если шрифт загрузится, то он применится только при обновлении страницы.

optional — текст не отображается в течение 100 миллисекунд, а затем отрисовывается запасным шрифтом. Даже если шрифт загрузится после этого, замена произойдёт только при обновлении страницы.

Оптимальное значение — swap , его можно использовать в большинстве случаев, оно удобно для пользователей. При подключении шрифта с помощью Google Fonts это значение установлено по умолчанию. Если же есть необходимость избежать мелькания текста (например, для вдумчивого чтения), подойдёт optional .

Предзагрузка шрифтов

Ещё один способ оптимизации — предварительная загрузка шрифтов. С её помощью можно изменить обычную приоритизацию загрузки ресурсов, тем самым сказав браузеру, что важно загрузить шрифт в первую очередь.

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

Для того, чтобы предзагрузка сработала, нужно поместить в ссылку на шрифт и задать атрибуту rel значение preload :

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

Уменьшение количества глифов шрифта

По умолчанию шрифт может содержать глифы (буквы, символы) разных языков и просто редко используемые. С помощью свойства unicode-range можно установить диапазон нужных символов в системе Unicode, тогда браузер будет подгружать сабсет (подмножество) шрифта только в тот момент, когда на странице появится символ из этого диапазона. Предварительно нужно подготовить файлы шрифтов, разбив их на группы.

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

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

Google Fonts по умолчанию использует сабсеты. Это можно увидеть, открыв CSS-файл, который подключается в при использовании сервиса. Для каждого языка есть отдельный сабсет. Пример для латиницы и кириллицы:

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

Полезности

. Про подключение шрифтов и методы оптимизации. . В ней кроме прочего приведена наглядная схема того, как работают все значения свойства. . Подробный разбор плюсов и минусов методов подключения и оптимизации шрифтов. . В статье разобраны разные методы: использование сабсетов шрифтов в зависимости от языка, HTTP-кеширование, Font Loading API и так далее. . . Статья о том, как использовать инструмент для создания сабсетов.

Подключение шрифтов — часть вёрстки

А научиться вёрстке проще, чем кажется. Скидка 1000₽ по промокоду SKUCHNO.

Подключаем веб-шрифты

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

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

Рассмотрим два способа подключить веб-шрифты

Подключить веб-шрифт со стороннего сервиса, например Google Fonts через

Подключить файлы шрифтов через @font-face

Подключение веб-шрифтов с Google Fonts

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

Заходим на официальный сайт Google Fonts и выбираем шрифт

Далее выбираем начертания веб-шрифта, например Regular (стандартной толщины) и Light (чуть более узкий, чем стандартный) — нажимаем на + Select this style. (Если нужно снять выбор — нажимаем на — Remove this style)

В правом верхнем углу нажимаем на иконку выбранных шрифтов

В открывшемся окне выбираем способ подключения и копируем код расположенный ниже

Вставляем скопированный код в

Чуть ниже копируем CSS свойство для использования подключеного шрифта

Используем подключенный шрифт в файле стилей CSS

Удобство данного способа в том, что добавив только одну строку в , сразу можно использовать данный шрифт

Минусом этого способа является зависимость от сервиса Google Fonts. Если сервис перестанет работать, то подключенные шрифты не загрузятся

Данный способ полезен при создании быстрых прототипов верстки, для своих проектов/экспериментов

Подключение через @font-face

В дизайн макете сайта может быть использован нестандартный шрифт, который недоступен в Google Fonts. В таких случаях дизайнер вместе с дизайн макетом предоставляет файлы используемых шрифтов или скачиваете шрифт самостоятельно

Google Fonts также позволяет скачивать бесплатные шрифты, чтобы хранить на хостинге вместе с проектом и подключать их через @font-face

На странице выбранного шрифта, сверху справа нажимаем на кнопку Download family

Разархивируем скачанный zip-файл и видим файлы выбранного шрифта всех возможных его начертаний в формате *.ttf

У веб-шрифта должен быть определенный формат, который будет поддерживаться браузерами. На данный момент самый оптимальный формат веб-шрифтов — *.woff (Поддержка формата WOFF)

Чтобы конвертировать файлы формата *.ttf в формат *.woff воспользуемся бесплатным онлайн сервисом Transfonter

Переходим на официальный сайт сервиса Transfonter и нажимаем кнопку Add fonts

В открывшемся окне ищем папку в которую был разархивирован скачанный zip-файл, и выбираем необходимые начертания шрифта

Выбранные начертания шрифта будут загружены в сервис для конвертирования

Ниже расположены настройки конвертирования. Справа в списке форматов шрифтов выбираем только формат WOFF. Все остальные настройки оставляем по-умолчанию

Далее нажимаем кнопку Convert

После того, как шрифты будут сконвертированы, ниже слева появится ссылка Download для скачивания

Скачанный zip-файл содержит сгенерированные стили CSS для подключения шрифтов и *.woff файлы шрифтов

Файлы шрифтов копируем в папку fonts нашего проекта. Названия файлов шрифтов не изменяем.

Файл stylesheet.css содержит следующие сгенерированные стили

Копируем все содержимое файла stylesheet.css в самое начало нашего основного файла стилей CSS.

Так как основной файл стилей находится в папке css, отличной от папки, где лежат файлы шрифтов, необходимо внести некоторые изменения — в url добавляем относительный путь до папки fonts (остальные свойства не меняем)

Аналогично используем подключенный шрифт в файле стилей CSS

Преимущество данного способа в том, что веб-шрифты храняться на хостинге вместе с проектом, и не зависят от сторонних сервисов

Google fonts | гугл шрифты

Сегодня мы поговорим о сервисе Google fonts (гугл шрифты) — как с ним работать: как выбирать, скачивать и подключать к сайту шрифты — бесплатно.

Быстрый выбор гугл шрифтов онлайн

Идем на сайт fonts.google.com, в фильтре сверху выбираем:

категорию — самая популярная Sans Serif;

нужный язык (Cyrillik -русские / кириллические);

сортируем (при необходимости).

Примечание: можно ничего не выбирать, шрифты которые поддерживают кириллицу будут написаны на русском, а не поддерживающие на английском.

Самые топовые кириллические шрифты: Roboto, Montserrat, Open Sans, Roboto Condensed, Source Sans Pro, Rubik, Oswald, Merriweather, Noto Sans, Yanone Kaffeesatz, Caveat.

Как скачать гугл шрифты

Выбрали шрифт, щелкнули по нему. На открывшейся странице в верхней части экрана нажмите на кнопку «Download family».

Качаются все начертания в формате ttf — можно использовать в word, фотошоп и прочих программах, но на сайте я бы не стал использовать данный формат. По этому смотрите ниже альтернативный вариант: google webfonts helper.

Google Fonts как подключить к сайту

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

Подключение через fonts google api

Данный способ на мой взгляд самый оптимальный!. После того ка подобрали шрифт, идем на его страницу и выбираем начертания после чего сбоку увидите вкладку с 2 табами, нажимаете на Embed и там увидите 2 варианта подключения: через тег и @import.

Затем подключаем шрифт для нужных блоков или сайта целиком в таблице стилей. Пример css кода для всего сайта.

Во втором случае сразу открываем файл стилей и прописываем в него подключение.

Пример CSS стилей:

Подключение нескольких шрифтов одновременно при помощи api

К примеру Вы хотите чтобы на сайте было 2 шрифта, один для всех текстов, а другой для всех заголовков, тогда щелкаем на вкладку «Browse fonts» выбираем еще один шрифт, затем его начертания и получаем уже объединенный код.

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

Если возникают какие нибудь проблемы с одновременным подключение шрифтов, то обратитесь к документации по API.

Качаем шрифты для WEB при помощи google webfonts helper и подключаем их к сайту.

Рекомендую для веба подключать только форматы woff и woff2 — они самые быстрые и поддерживаются всеми современными браузерами: Chrome, Firefox, IE 9+, Safari.

Идем на сайт google-webfonts-helper.herokuapp.com/fonts/ вбиваем в окно поиска название шрифта. После чего выбираем нужный результат. Далее выбираем кодировку (Select charsets) и размеры (Select styles). Ниже выбираем поддержку браузеров: все (Best Support) или только современные (Modern Browsers) — лучше данный вариант. Копируем CSS код в таблицу стилей, скачиваем шрифт и затем заливаем его на сайт.

Важно! По умолчанию опция Customize folder prefix (optional) стоит ../fonts/, следовательно чтобы шрифты подключались к сайту, вы должны залить их в папку fonts, а эта папка должна лежать в той-же директории, что и папка /css вашего сайта. И да вы можете поменять значение по умолчанию, чтобы код перегенерился!

Пример CSS кода стандартного подключение скачанных шрифтов.

Если к примеру у вас 1 ttf шрифт (нет woff, eot, …), то подключение будет выглядеть так.

здесь display: swap ; — это так сказать рекомендация гугла по оптимизации скорости.

Вот и все. Если что то не понятно можете заглянуть в руководство от гугла.

Похожие публикации:

Где в 1с комплектация номенклатуры

Где лежат лицензии 1с

Как в 1с 8 изменить номер документа

Как в 1с зуп оформить компенсацию отпуска

Читать:
Как включить заднюю передачу на фольксваген поло