Как подключить стили шрифта html

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

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

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

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

Конвертация шрифтов

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

Так, одни понимает «woff», другой «ttf», а третьему «eof» подавай. Поэтому, если заказчик серьезный, то он передает на верстку макет и прилагает все форматы шрифтов, но это бывает очень редко. И нам, верстальщикам, зачастую, приходится самим выкручиваться из ситуации.

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

• onlinefontconverter.com,
• fontsquirrel.com,
• font2web.com

То есть, они позволяют загрузить один формат шрифта и на его основе сгенерировать дополнительные.

Первым делом, давайте назовем его осмысленно, ведь после скачивания он назывался «12236». Я переименую его в lazer, так будет удобнее с ним работать.

Теперь, давайте перейдем на сайт «onlinefontconverter» и выбираем необходимые форматы.

Затем жмем «select font(s)» и выбираем шрифт, которые хотим сконвертировать в указанные форматы. После загрузки жмем «Done», затем «Save your font» и «Download attachment».

Начнется скачивание архива.

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

Распакуйте архив и переместите шрифты в свой проект. Обычно, это папка «fonts».

Как видите, не все форматы получили такое же имя, которое мы задали немного ранее. Давайте переименуем.

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

Для более удобного копирования, вот код:

@font-face < font-family: 'lazer'; src: url('../fonts/lazer.eot'); src: url('../fonts/lazer.woff2') format('woff2'), url('../fonts/lazer.eot?#iefix') format('embedded-opentype'), url('../fonts/lazer.woff') format('woff'), url('../fonts/lazer.ttf') format('truetype'), url('../fonts/lazer.svg#lazer') format('svg'); font-weight: normal; font-style: normal; >

В «font-family» придумали удобное для подключения имя. В моем случае я так и оставил «lazer», теперь в любом месте, где понадобится использование этого шрифта, нужно просто указать его имя.

Если по какой-то причине шрифт не применился, то в первую очередь проверьте пути подключения. В 99% случаев проблема именно в этом.

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

Как подключить шрифт в css

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

Отслеживать
ответ дан 18 мая 2022 в 18:54
Александр Сычёв Александр Сычёв
2,129 3 3 золотых знака 5 5 серебряных знаков 18 18 бронзовых знаков

• html
• css
• шрифты

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

@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-правил, где есть селектор и применяемые к нему правила. Основное отличие в том, что на месте селектора мы активируем функцию, адресованную браузеру.

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

1. Название шрифта, которое мы будем использовать ниже в CSS: свойство font — family . Название может отличаться от настоящего названия этого шрифта.
2. Ссылки на файлы, из которых браузер может взять шрифт: свойство 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 . Ах, чудный идеальный мир, где все дизайнеры используют только бесплатные шрифты ��‍♀️

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

Шрифты CSS

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

Достаточно богатую коллекцию шрифтов имеет сервис Google Fonts. Также с помощью него довольно просто подключить шрифт к себе на сайт.

Существует 2 основных способа, как подключить шрифт к сайту:

С помощью HTML: Между тегами необходимо вставить строку следующего содержания:

@import url(http://fonts.googleapis.com/css?family=Ubuntu);

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

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

Здесь шрифт Ubuntu применяется к тегу H1 (Название шрифта указывается в свойстве font family.) и цвет шрифта устанавливается с помощью тега color.

При использовании шрифтов от Google необходимо помнить, что отображение нужного шрифта может не поддерживаться в некоторых браузерах (кроме Google Chrome).

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

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

• Курсив CSS
• Жирный текст CSS
• Зачеркнутый текст HTML
• Тень текста
• Подчеркнутый текст HTML
• Выравнивание текста в HTML
• Цвет шрифта HTML