@font-face
@font-face CSS @-правило (en-US) позволяет указать шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удалённого сервера, либо с компьютера пользователя. Если в правиле была объявлена функция local() , с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции url() . @font-face позволяет разрабатывать контент не ограничиваясь набором «безопасных» шрифтов (шрифтов, которые настолько распространены, что считаются доступными по умолчанию). Возможность определить локально установленный шрифт позволяет более гибко настраивать шрифты не полагаясь на соединение с интернетом.Распространённым случаем является одновременное использование url() и local() , чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.Это правило может использоваться не только на верхнем уровне CSS, но и внутри любого @-правила (en-US) .
@font-face font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); >
Синтаксис
Descriptors
Определяет как отображается шрифт, основываясь на том, был ли он загружен и готов ли к использованию.
Указывает имя шрифта, которое будет использоваться для задания свойств шрифта.
Позволяет контролировать другие расширенные особенности OpenType-шрифтов.
Позволяет осуществлять низкоуровневый контроль над вариациями OpenType и TrueType шрифтов, указывая четырёхбуквенные названия осей для изменения вместе с их значениями.
Задаёт ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удалённого файла шрифта или имя шрифта на компьютере пользователя.
Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции format() : src: url(ideal-sans-serif.woff) format(«woff»), url(basic-sans-serif.ttf) format(«opentype»);Список доступных форматов: «woff» , «woff2» , «truetype» , «opentype» , «embedded-opentype» , и «svg» .
Диапазон Unicode кодов, который будет использоваться в шрифте.
Formal syntax
@font-face =
@font-face < >
Примеры
Этот пример просто указывает загружаемый шрифт для использования и применяет его ко всему телу документа:
html> head> title>Web Font Sampletitle> style type="text/css" media="screen, print"> @font-face font-family: "Bitstream Vera Serif Bold"; src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf"); > body font-family: "Bitstream Vera Serif Bold", serif; > style> head> body> This is Bitstream Vera Serif Bold. body> html>
В этом примере используется локальный пользовательский шрифт «Helvetica Neue Bold»; если у пользователя этот шрифт не установлен (используются два различных имени), тогда вместо него используется загружаемый шрифт с названием «MgOpenModernaBold.ttf»:
@font-face font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; >
MIME-типы шрифтов
| Формат | MIME-тип |
|---|---|
| TrueType | font/ttf |
| OpenType | font/otf |
| Web Open File Format | font/woff |
| Web Open File Format 2 | font/woff2 |
Примечания
- Веб шрифты попадают под правило ограничения домена (файлы шрифтов должны находиться на том же самом домене, что и использующая их страница), если это ограничение не снимается с помощью CORS.
- @font-face не может быть объявлен внутри CSS-селектора. Следующий пример не будет работать:
.className @font-face font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; > >
Спецификации
| Specification |
|---|
| CSS Fonts Module Level 4 # font-face-rule |
Browser compatibility
BCD tables only load in the browser
See also
- About WOFF (en-US)
- Everythingfonts font-face generator
- FontSquirrel @font-face generator
- Beautiful fonts with @font-face
- Open Font Library
- Microsoft Developer Network (MSDN) @font-face reference
- When can I use WOFF?
- When can I use SVG Fonts?
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Как подключить шрифт на сайт: 3 разных способа + готовый CSS шаблон
Шрифты играют огромную роль в оформлении сайта. Один и тот же текст, написанный разными шрифтами может производить на человека прямо противоположные впечатления.
Одни шрифты выглядят более убедительно, другие — более интригующе.
Но как подключить любые шрифты к сайту и применять их где захочется?
В этой статье я покажу вам 3 способа , с помощью которых вы сможете подключить любые, самые разнообразные и нестандартные шрифты на свой сайт. И неважно, каким CMS вы пользуетесь: WordPress, Joomla, Drupal или Open Cart.
Эксклюзивный бонус: Нажмите здесь чтобы получить ПОШАГОВЫЙ видеоурок по подключению шрифтов на сайт ( нажмите чтобы скачать ).
Вы убедитесь, что в подключении шрифтов к сайту нет ничего сложного.
- Как установить любые шрифты за 2 минуты (WordPress) >>
- Как бесплатно подключить шрифты с сервиса Google Fonts >>
- Как гибко подключить шрифты с помощью CSS >>
- Где бесплатно взять веб-шрифты для сайта >>
- Особенности подключения шрифтов для разных CMS >>
Если у вас сайт на Wordress, читайте способ №1, он — самый простой. Если вы разбираетесь в CSS — можете сразу перейти ко второму или третьему способу.
Способ №1. Быстрое подключение шрифтов к сайту на WordPress ( cложность: ⭐ ⭐ ⭐ )
Если на ваш сайт установлена премиальная тема оформления — вы можете подключить шрифты за 2 минуты.
Вы хотите изменить шрифт заголовков своих статей. Для этого:
1. В админ-панели перейдите в раздел Theme Options. В зависимости от вашего шаблона этот раздел может называться немного по-другому, но смысл всегда один — «настройки темы».
2. Перейдите в раздел Typography (типография).
3. Выберите элемент, шрифт которого хотите изменить (заголовки, абзацы):
4. Нажмите на «Сохранить изменения».
Если ваш сайт работает на другом движке, или ваша тема оформления не предусматривает таких настроек, переходите к следующему способу.
Способ №2. Используйте всю силу Google Fonts ( cложность: ⭐ ⭐ ⭐ ⭐ )
Вы когда-нибудь слышали про Google Fonts? Если вкратце — это сервис, с помощью которого вы можете подключить более 700 шрифтов на свой сайт.
Шаг 1. Перейдите на официальный сайта сервиса.
Шаг 2. Найдите в коллекции Гугл шрифтов те, которые вам подходят. В правом меню можно сузить круг задав язык, начертание и популярность шрифта:
Для того, чтобы сервис показал шрифты с поддержкой русского языка в пункте Languages выберите Cyrillic.
Шаг 3. Представим, вам понравился шрифт Roboto. Нажмите на иконку «+»:
Вы можете добавить любые шрифты нажимая на значок «+».
Шаг 4. После этого нужно развернуть корзину с выбранными шрифтами:
Перейдя во вкладку Customize вы можете выбрать начертания и язык. Касательно начертаний, советую выбрать стандартный комплект — нормальный (400), курсивный (400 italic), жирный (700) и курсивно-жирный (bold 700 italic):
Но если вам нужно только жирное начертание (для заголовков), выберите только ее.
Помните, чем больше начертаний вы выберите, тем больше будет вес загружаемого файла.
Чтобы не замедлять скорость загрузки сайта выбирайте как можно меньше начертаний шрифта.
Шаг 5. Вернитесь в раздел Embed и выберите владку @IMPORT. Далее, скопируйте строку кода, содержащую «@import» и вставьте на первую строчку CSS файла вашего сайта:
Если у вас сайт на WordPress, CSS файл скорее всего находится здесь: wp_content/themes/’вашатема’/css/. В папке CSS скорее всего будет файл Fonts, куда и нужно перенести код вставки от Google:
Не важно на каком CMS работает ваш сайт, просто вставьте код, и все будет ��
Так как сначала должны загрузиться шрифты, только потом все остальное — размещайте код подключения шрифта в самое начало CSS файла.
Определять шрифт для тех или иных элементов сайта вы можете в том же CSS файле.
Для придания шрифта Roboto всем абзацам я напишу следующее: p
Способ №3. Кастомное подключение шрифтов с помощью CSS ( cложность: ⭐ ⭐ ⭐ ⭐ ⭐ )
Если вы достаточно квалифицированы, лучше всего самостоятельно подключить шрифты через CSS. В этом случае шрифты будут находится на вашем сервере в специальной папке. Но для начала нужно их где-то раздобыть.
Где взять веб-шрифты для сайта
А вы знали, что для использования веб-шрифтов нужно купить сепциальную лицензию?
Подключить шрифты с бесплатной лицензией. Проще всего найти их с помощью сервиса Fontsquirrel, что мы и сделаем.
Шаг 1. Перейдите на официальный сайт сервиса
Шаг 2. В правом меню, в разделе Languages выбирите Cyrillic.
Шаг 3. Найдите подходящие шрифт. Обращайте внимание на количество начертаний.
Например, если есть 4 начертания, будет написано 4 Styles:
Обозначение начертаний шрифтов — нормальный (400/regular), курсивный (italic), жирный (700/bold), жирный курсивный (700 italic).
Шаг 5. Нажимаем на название шрифта и переходим на страницу настроек.
Шаг 6. Переходим в раздел Webfont Kit. Выбираем все форматы шрифтов и жмем на Download @FONT-FACE KIT. Если доступно всего 1-2 формата, не страшно.
Для подключения шрифтов используем @Font-face
Через директиву @font-face вы можете подключить как один, так и несколько шрифтов к своему сайту. Но у данного способа есть свои плюсы и минусы.
- Через CSS вы можете подключать шрифты любых форматов: ttf, otf, woff, svg.
- Файлы шрифтов будут находится на вашем сервере — вы не будете зависеть от сторонних сервисов.
- Для правильного подключения шрифта для каждого начертания нужно прописывать отдельный код.
- Не зная CSS можно легко запутаться.
Вы можете просто скопировать мой готовый код и где нужно указать свои значения.
Шаг 1. Перенесите файлы скачанных шрифтов на ваш сайт. Это можно сделать через панель управления вашего хостинга или через FTP.
Я предлагаю создать папку fonts в той же директории, где находится ваш CSS файл. Перенесите все файлы шрифтов в эту папку.
Шаг 2. Пропишите в самом начале CSS файла следующую запись:
@font-face font-family: 'MyWebFont';
src: url('../fonts/WebFont.eot');
src: url('../fonts/WebFont.eot?iefix') format('eot'),
url('../fonts/WebFont.woff') format('woff'),
url('../fonts/WebFont.ttf') format('truetype'),
url('../fonts/WebFont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
>
Где MyWebFont — это название шрифта, а значение свойства src (данные в скобках в кавычках) — их месторасположение (относительные ссылки). Нам нужно указать каждое начертание отдельно.
Так как мы сначала подключаем нормальное начертание, свойствам font-weight и font-style придаем значение normal.
Шаг 3. При подключении курсивного начертания, пропишите следующее:
@font-face font-family: 'MyWebFont';
src: url('../fonts/WebFont-Italic.eot');
src: url('../fonts/WebFont-Italic.eot?iefix') format('eot'),
url('../fonts/WebFont-Italic.woff') format('woff'),
url('../fonts/WebFont-Italic.ttf') format('truetype'),
url('../fonts/WebFont-Italic.svg#webfont') format('svg');
font-weight: normal;
font-style: italic;
>
Где все то же самое, только свойству font-style мы придали значение italic.
Шаг 4. Для подключения жирного начертания, добавьте следующий код:
@font-face font-family: 'MyWebFont';
src: url('../fonts/WebFont-Bold.eot');
src: url('../fonts/WebFont-Bold.eot?iefix') format('eot'),
url('../fonts/WebFont-Bold.woff') format('woff'),
url('../fonts/WebFont-Bold.ttf') format('truetype'),
url('../fonts/WebFont-Bold.svg#webfont') format('svg');
font-weight: bold;
font-style: normal;
>
Где свойству font-weight мы задали значение bold.
Не забудьте для каждого начертания указывать правильное расположение файлов шрифтов.
Шаг 5. Для подключения полужирного курсивного начертания пропишите следующее:
@font-face font-family: 'MyWebFont';
src: url('../fonts/WebFont-Italic-Bold.eot');
src: url('../fonts/WebFont-Italic-Bold.eot?iefix') format('eot'),
url('../fonts/WebFont-Italic-Bold.woff') format('woff'),
url('../fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('../fonts/WebFont-Italic-Bold.svg#webfont') format('svg');
font-weight: bold;
font-style: italic;
>
Ну вот и все 🙂 Только что вы подключили 4 начертания шрифта на свой сайт.
Но есть одна ремарка — данное подключение шрифтов будет некоректно отображаться в браузере Internet Explorer 8. Утешает то, что их осталось совсем мало.
Как подключать шрифты для сайтов на разных CMS
Неважно, на каком движке ваш сайт (WordPress, Joomla, Drupal, Opencart) — если у вас есть доступ к CSS файлу, вы можете подключить шрифты как через Google Fonts, так и закачав их на свой сервер через Fontsquirrel.
Ну вот и все. Если вы считаете, что эта статья может быть полезна другим вебмастерам — поделитесь ею в социальных сетях.
[popup_trigger tag=»span»] Подписывайтесь на мою рассылку [/popup_trigger], чтобы не пропустить полезные и интересные публикации на блоге.
Кликните по ссылке ниже чтобы получить бесплатный доступ к ПОШАГОВОМУ видеоуроку по подключению шрифтов.
Как изменить или подключить шрифт в CSS
Большинство текстовых элементов по умолчанию имеют шрифт Times New Roman. В CSS есть возможность установить другие шрифты. Также в CSS можно подключить шрифт, который изначатьно не был предусмотрен в браузерах. В этой теме мы рассмотрим, как это сделать.
Семейства шрифтов
Шрифты подразделяются на семейства. Существуют такие семейства шрифтов:
serif — с засечками
sans-serif — без засечек
Безопасные шрифты
Существует достаточно много шрифтов. Сложность их использования заключается в том, что каждая операционная система имеет свой набор шрифтов. Кроме того, различные браузеры также отображают не все шрифты. Если для какого-то текстового элемента установлен шрифт, которого нет в операционной системе компьютера пользователя, то текст будет отображаться каким-то другим шрифтом. Шрифты, которые отображаются на всех компьютерах и во всех браузерах, называются безопасными. Считается, что абсолютно безопасных нет. Но всё же, существует ряд шрифтов, которые есть у абсолютного большинства пользователей. Далее приведены безопасные шрифты с указанием их семейства.
Times New Roman, serif
Trebuchet MS, sans-serif
Courier New, monospace
Comic Sans MS, cursive
Другие шрифты Вы можете найти, если наберёте в любом поисковике: стандартные шрифты.
Установка шрифта
Чтобы изменить или подключить шрифт в CSS используется свойство font-family . Значением этого свойства является название шрифта. Для примера создадим абзац и установим ему шрифт:
Текст
Если в названии шрифта больше одного слова, то оно пишется в кавычках. Пример:
Свойство font-family позволяет указать несколько шрифтов через запятую. Также можно указать семейтсво шрифтов. При этом, будет использоваться шрифт, указанный первым. Если такого нет, то используется следующий шрифт, и так далее. В основном, на реальных страницах так и делают. Это делается для того, чтобы быть уверенным, что страница будет отображаться так, как нужно.
Как подключить нестандартный шрифт в CSS
Кроме шрифтов, которые содержатся в операционной системе пользователя, можно использовать и другие шрифты. Их можно найти в интернете или создать самостоятельно. Существует много нестандартных шрифтов. Их можно найти, через поисковик. Файл шрифта нужно скачать и присоединить к странице. Некоторые шрифты являются платными. Об этом должна быть информация на странице, с которой Вы скачиваете шрифт.
Сложность использования нестандартных шрифтов заключается в том, что каждый браузер поддерживает свой набор форматов. Поэтому, при использовании нестандартрого шрифта нужно проверять, как отображается страница в разных браузерах. Форматов шрифтов достаточно много. Наиболее универсальным является формат woff. Он должен работать в большинстве современных браузеров. Также распространены ttf и otf.
Чтобы подключить нестандартный шрифт CSS используется правило @font-face. В нём обязательно должны быть два свойства: в свойстве font-family указывается название шрифта, под которым он будет использоваться на сайте. Название Вы выбираете сами. А в свойстве src указывается путь к файлу шрифта.
После этого, шрифт можно использовать для любого селектора. В свойстве font-family нужно указать название, которое Вы выбрали для шрифта.
Для примера я использую файл шрифта unineue.woff. Он располагается в той же папке, что и страница. Шрифт я назову Nfont.
7
8
9
10
11
12
13
14
15
16
@font-face < font-family: Nfont; src: url("unineue.woff"); >#text
Текст с нестандартным шрифтом
Чтобы шрифт работал в разных браузерах, можно использовать несколько файлов с разными форматами. В свойстве src путь к файлам пишется через запятую. Каждый браузер сам определяет, какой тип файла использовать. При этом желательно указывать форматы файлов, чтобы браузер мог правильно выбрать файл. CSS правило @font-face будет выглядеть так:
@font-face
Коприрование материалов сайта возможно только с согласия администрации
2017 — 2023 © basecourse.ru Все права защищены
Как подключить собственный шрифт к форме
В нашу форму Вы можете подключить любой шрифт из GoogleFonts. Это сервис, с помощью которого Вы можете подключить более 700 шрифтов в свою форму. Для этого Вам необходимо перейти во вкладку “Тема оформления” в раздел “CSS”:
В GoogleFonts, Вы можете выбрать категории шрифтов. Для того, чтобы сервис показал шрифты с поддержкой русского языка в списке “Language” выберите пункт “Cyrillic”:
Выберите необходимый шрифт, для примера — “Roboto” и кликните на него:
Выберите понравившийся стиль и нажмите кнопку “+Select this style”:
Справа появится меню выбранных стилей и их описание во вкладке “Review”. Нас интересует вкладка “Embed”. Кликните на эту вкладку:
Откройте “@import”, где находится необходимый код для нашей темы оформления:
Необходимо скопировать код, который заключён в тег и значение в пункте «CSS rules to specify families». Далее вставить в разделе «CSS», во вкладке «Тема оформления»:
На скрине во второй строке прописали в таком виде через знак » * «, чтобы этот стиль был применён ко всем элементам формы.
Если выбрать несколько стилей для шрифта, то во вкладке «@import» добавится этот стиль:
Тогда используемый шрифт в форме будет иметь такой вид:
Также, можно задать стиль определённому элементу. Для этого добавим, например для элемента «ФИО» такой код:
Где .user_formish table.username input.text отвечает за введённый текст в поле «ФИО»:
Также можно добавить код для конкретного элемента. Для этого, например, можно задать класс элементу. Добавим в форму элемент «Текстовое поле»:
Зайдём в режим редактирования элемента и в поле «Имя CSS класса», укажем название класса — «prostotext»:
Тогда добавляемый код должен иметь вид:
Теперь, при вводе данных в текстовое поле, именно в этом поле будет заданный шрифт:
Если Вам необходимо в другом текстовом поле использовать такой шрифт, то достаточно в этом элементе в режиме редактирования прописать класс «prostotext» в поле «Имя CSS класс». Таким же образом можно добавить стиль заголовкам:
Тогда в пользовательский CSS добавим класс .zagolovok:
Где класс label.label отвечает за названия всех элементов. Т.к. мы использовали только в элементе «ФИО» класс «zagolovok», то в режиме просмотра будет название этого элемента с заданным стилем:
Если Вам необходимо в других названиях элементов использовать такой шрифт, то достаточно в этом элементе в режиме редактирования прописать класс «zagolovok» в поле «Имя CSS класс».
Вот так легко, Вы можете добавить любой стиль разным элементам формы, чтобы стиль формы совпадал со стилем Вашего сайта.