Как установить шрифт html

Свой шрифт на странице

Шрифт является неотъемлемой частью веб-дизайна, придаёт сайту выразительность и узнаваемость, выражает характерный стиль сайта и непосредственно связан с восприятием текстов. Хорошо подобранный шрифт может не замечаться, но без него не будет той изюминки, придающей дизайну сайта завершённость.

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

Значением свойства font-family выступает название гарнитуры шрифта, она будет применяться ко всем заголовкам . Но что увидят посетители сайта, у которых наш эффектный и редкий шрифт не установлен? Подобная ситуация наиболее вероятна, так что если браузер не распознаёт заявленный шрифт, он будет использовать шрифт по умолчанию, к примеру в Windows это Times New Roman. Весь наш тщательно продуманный шрифтовой дизайн в одночасье рассыплется и пойдёт прахом, поэтому надо поискать наиболее универсальное решение. Первое что сразу же приходит в голову — это организовать загрузку файла шрифта на компьютер пользователя и отображение текста выбранным шрифтом. По сравнению с другими методами вроде отображения текста через рисунок этот способ самый простой и универсальный.

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

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

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

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

В табл. 1 перечислены версии браузеров и форматы шрифтов, которые они поддерживают.

Табл. 1. Поддерживаемые форматы

Формат	Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
TTF	9.0+	4.0+	10.0+	3.1+	3.5+	2.2+
EOT	5.0-8.0
WOFF	9.0+	5.0+	3.6+
SVG	1.0+	9.0+	3.1+	3.5+	1.0+

Самый поддерживаемый формат — TTF. За исключением IE до версии 9.0 и iOS все браузеры его прекрасно понимают. Так что если у вас шрифт именно в этом формате и вы ориентируетесь на современные браузеры, никаких дополнительных действий делать не придётся. Достаточно в стилях написать следующий код (пример 1).

Пример 1. Подключение TTF

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

     @font-face < font-family: Pompadur; /* Гарнитура шрифта */ src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */ >h1 
Современный элемент политического процесса
 
По сути, политическое учение Монтескье приводит континентально-европейский тип политической культуры, что получило отражение в трудах Михельса.
  

Вначале загружаем сам файл шрифта с помощью правила @font-face . Внутри него пишем название гарнитуры шрифта через параметр font-family и путь к файлу через src . Дальше используем шрифт как обычно. Так, если нам требуется задать шрифт заголовка, то для селектора h1 , как показано в примере, задаём свойство font-family с именем загруженного шрифта. Для старых версий IE через запятую перечисляем запасные варианты. В данном случае шрифт заголовка будет «Comic Sans MS», поскольку IE8 и ниже не поддерживает формат TTF.

Результат данного примера показан на рис. 1.

Рис. 1. Заголовок с загруженным шрифтом

Что делать, если вам позарез нужен витиеватый шрифт в IE8? К счастью, @font-face позволяет подключать одновременно несколько файлов шрифтов разных форматов. Браузеру остаётся только выбрать подходящий. Таким образом, универсальное решение, работающее во всех браузерах, сводится к конвертации имеющегося формата TTF в EOT с последующим подключением обоих файлов.

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

Переходим на этот сайт, загружаем TTF-файл и нажимаем кнопку «Convert TTF to EOT», после чего сохраняем полученный файл в папку со шрифтами. В стилях осталось совершить небольшой трюк и заставить разные браузеры загружать шрифт в нужном формате. Для этого добавляем два параметра src . Первый указывает на файл EOT и предназначен для старых версий IE. Второй параметр src должен содержать два адреса перечисляемых через запятую, один из них указывает на файл TTF. Дело в том, что IE версии 8.0 и младше не понимает запятую в параметре src и, соответственно, будет игнорировать параметр целиком. Вариантов написания может быть несколько, например, повторить url , указать имя шрифта внутри параметра local или вообще написать несуществующий шрифт. Если браузер не сможет загрузить такой шрифт, то он перейдёт ко второму в списке, а он у нас написан правильно. Допустимые способы написания.

src: url(fonts/pompadur.ttf), url(fonts/pompadur.ttf);
src: local(pompadur), url(fonts/pompadur.ttf);
src: local(‘bla bla’), url(fonts/pompadur.ttf);

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

Пример 2. Подключение EOT

HTML5 CSS3 IE Cr Op Sa Fx

     @font-face < font-family: Pompadur; /* Гарнитура шрифта */ src: url(fonts/pompadur.eot); /* Для IE5-8 */ src: local(pompadur), url(fonts/pompadur.ttf); /* Для остальных браузеров */ >h1 
Современный элемент политического процесса
 
По сути, политическое учение Монтескье приводит континентально-европейский тип политической культуры, что получило отражение в трудах Михельса.
  

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

Google Web Fonts

Удобный сервис, берущий на себя рутину по поддержке разных форматов шрифтов и версий браузеров, вы найдёте по адресу www.google.com/webfonts. Хотя в коллекции сравнительно мало разных шрифтов (их несколько десятков), все они подобраны очень качественно и свободны для использования на сайтах.

Перед выбором шрифта переключите значение Script на Cyrillic, тогда вы увидите список шрифтов поддерживающих русский язык (рис. 2).

Рис. 2. Выбор шрифтов в Google Web Fonts

Понравившийся шрифт предварительно следует добавить в коллекцию, нажав на кнопку «Add to Collection», а затем на кнопку «Use» в правом нижнем углу экрана. На следующей странице (рис. 3) вы можете окончательно выбрать нужные вам шрифты. При этом надо понимать, что гарнитура шрифта может содержать несколько начертаний и каждое из них повышает объём загружаемых файлов.

Рис. 3. Загружаемые на страницу шрифты

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

1. Через элемент . Строка будет иметь примерно следующий вид.

2. Через правило @import . Такую строку вставляем в свой CSS-файл в самом верху.

3. Через JavaScript.

В принципе, все пути равноценны, так что выбирайте по своему предпочтению.

Преимущества применения данного сервиса такие.

• Шрифты свободны для использования, вам не нужно за них платить.
• Предлагаемые шрифты «заточены» для просмотра на экране, файлы оптимизированы и занимают сравнительно небольшой объём.
• Браузер определяется автоматически и под него выдаётся шрифт в нужном формате.

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

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

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

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

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

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

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

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

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

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

body

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

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

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

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

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

1. Название шрифта, которое затем нужно использовать, чтобы задать элементам подключённый шрифт.
2. Адрес файла со шрифтом, который нужно подключить, и его формат. Если адресов несколько, их можно указать через запятую. В этом случае важен порядок — браузер будет последовательно пытаться подключить файлы. Первым должен быть самый подходящий формат, а далее — запасные варианты. Также с помощью функции local можно добавить возможность перед загрузкой шрифта с сервера проверить, установлен ли он на компьютере пользователя. Если да, запроса к серверу за шрифтом не будет — при рендеринге используется локальная версия. Но у этого способа есть минус — шрифт на компьютере пользователя может быть устаревшим, и тогда страница отобразится не совсем так, как было задумано.
3. Начертания: жирное, курсивное и так далее. Для каждого начертания нужно отдельное правило @font-face .

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

@font-face < font-family: "Roboto"; font-style: normal; font-weight: 400; /* Браузер сначала попробует найти шрифт локально */ src: local("Roboto"), /* Если не получилось, загрузит woff2 */ url("/fonts/roboto.woff2") format("woff2"), /* Если браузер не поддерживает woff2, загрузит woff */ url("/fonts/roboto.woff") format("woff"); >/* Теперь можно использовать шрифт */ body

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

/* latin */ @font-face < font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: local("Roboto"), local("Roboto-Regular"), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; >/* cyrillic */ @font-face < font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: local("Roboto"), local("Roboto-Regular"), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; >

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

Полезности

• HTML шорты: посторонние шрифты. Про подключение шрифтов и методы оптимизации.
• Исчерпывающее руководство по стратегиям загрузки веб-шрифтов. Подробный разбор плюсов и минусов методов подключения и оптимизации шрифтов.
• Оптимизация шрифтов. В статье разобраны разные методы: использование сабсетов шрифтов в зависимости от языка, HTTP-кеширование, Font Loading API и так далее.
• Доклад Вадима Макеева про шрифты.
• Subsetting Fonts with Glyphhanger. Статья о том, как использовать инструмент для создания сабсетов.

Материалы по теме

• Полезные команды в cmd на Windows
• Как правильно вставлять SVG
• Что такое Pixel Perfect вёрстка

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Как подключить шрифты для сайта? Сотни бесплатных шрифтов.

Привет, с вами Сергей Никонов. Недавно мне задали вопрос — Где найти хорошие шрифты для сайта, желательно бесплатные?

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

Видео Как встроить шрифт на сайт

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

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

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

Есть возможность выбрать шрифты с засечками, без засечек и другие параметры шрифтов. Особое внимание уделите фильтру Language. Если язык твоего сайта основан на кириллице, например язык сайта на русском, украинском, белорусском, болгарском, молдавском и других языках — выбирай Cyrillic или Cyrillic Extended, если английский или языки в основу которых входит латиница — выбирайте Latin.

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

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

Примерно так:

Когда ты нашел шрифт для сайта, который тебе очень понравился, ты можешь встроить его несколькими способами:

Как встроить шрифт на сайт. Способ первый.

Вставить в html-страницу и затем в css-стилях указать нужный шрифт, скопировав его их этого окна. То есть так:

В css-стили:

body

Как встроить шрифт на сайт. Способ второй.

Или ты можешь импортировать его прямо в css-стили через ключевое слово @import и указать font-family в нужный тебе блок стилей.

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,400&display=swap'); body

Как встроить шрифт для Windows или Photoshop (Фотошоп).

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

Еще ты можешь кастомизировать понравившийся тебе шрифт, то есть выбрать только нужные тебе параметры шрифта. Для этого перейди на вкладку CUSTOMIZE и выбери нужные тебе параметры шрифта для сайта. Например, от этого шрифта ты хочешь использовать только жирный стиль bold 700 или наклонное начертание шрифта italic. Также здесь ты можешь выбрать какие языки этот шрифт должен поддерживать.

Но помни самое главное. Старайся выбирать параметры только те, которыми ты реально будешь пользоваться, иначе твой сайт будет загружаться медленнее, за счет большого объема файла шрифта. Тебе кстати поможет этот указатель Load Time. Если указатель зеленый и ты видишь надпись Fast, значит все хорошо. Нужно пересмотреть выбор параметров, если указатель желтого или красного цвета. Например, если выбрать множество дополнительных стилей.

Выводы

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

Подпишись на канал FructCode, поставь ставь Like и нажми на колокольчик, чтобы не пропускать новые видео.

С вами был Сергей Никонов и помни, что все мои актуальные курсы по программированию и верстке ты можешь найти только на моем сайте FructCode.com

Как подключить шрифт на сайт: 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], чтобы не пропустить полезные и интересные публикации на блоге.

Кликните по ссылке ниже чтобы получить бесплатный доступ к ПОШАГОВОМУ видеоуроку по подключению шрифтов.