Полное руководство по HTML-шрифтам (или веб-шрифтам)

Автор: Ольга Маркова

Автор Freelance.Today

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

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

Где можно найти веб-шрифты, какие шрифты совместимы с HTML, а какие могут использоваться на любом веб-сайте? Мы рассмотрим их все в этой статье.

Что такое веб-шрифты?

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

Google Fonts — это коллекция модных веб-шрифтов.

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

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

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

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

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

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

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

Какие шрифты можно использовать в HTML?

Некоторые шрифты не предназначены для использования в Интернете, но какие из них можно вставить на ваш HTML-сайт?

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

Шрифт Scribble не подходит для веб-страниц

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

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

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

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

• TTF
• OTF
• WOFF / WOFF2
• SVG
• EOT

С этими типами файлов шрифтов вы сможете использовать их на всем сайте и стилизовать их с помощью HTML и CSS.

Существуют также веб-безопасные шрифты, которые обычно работают во всех браузерах и программах.

Что такое безопасные веб-шрифты?

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

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

Arial — распространенный веб-шрифт

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

Вот список веб-безопасных шрифтов, которые, как правило, можно использовать.

• Arial
• Brush Script MT
• Comic Sans
• Courier New
• Garamond
• Georgia
• Helvetica
• Impact
• Lucida Console
• Palatino
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

Есть также десятки других веб-безопасных шрифтов.

Из всех них наиболее безопасными являются Arial, Times New Roman, Helvetica и Courier New. Несмотря на то, что они считаются безопасными, некоторые из них не работают в определенных операционных системах.

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

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

Немного о стеках шрифтов

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

Благодаря резервным шрифтам легко загрузить безопасный веб-шрифт, если что-то пойдет не так. Это работает путем выбора шрифта, установленного пользователем, на основе семейства шрифтов:

• Шрифты с засечками определяются маленькими штрихами, прикрепленными к концам буквенных линий. Эти шрифты считаются элегантными и разборчивыми.
• Шрифты без засечек разработаны так же, как шрифты с засечками, но без штрихов. Они проще и читабельнее.
• Моноширинные шрифты равномерно распределены между буквами, что придает им особый вид.
• Курсивные шрифты (или шрифты Script ) обозначают официальные рукописные буквы. Они не очень разборчивы и лучше подходят для заголовков или графического дизайна.
• Фэнтезийные шрифты (или декоративные шрифты ) сильно стилизованы и, как и курсивные шрифты, не подходят в качестве основного текста.

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

Как добавлять шрифты с помощью HTML

Если вы хотите добавить веб-шрифт на свой сайт, у вас есть несколько вариантов.

Для пользователей WordPress самый простой способ разместить шрифты на вашем сайте — использовать плагин. Двумя наиболее популярными из них являются Easy Google Fontsи Use Any Font. Первый упрощает процесс добавления шрифтов Google на ваш сайт, а UAF позволяет загружать шрифты напрямую на ваш сайт.

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

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

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

К счастью, это очень легко сделать, если у вас есть правильно настроенный веб-шрифт. Просто загрузите файлы на свой сервер, а затем используйте правило @ font-faceв своей таблице стилей, чтобы определить его. Например:

@font-face{

font-family:FontName;

src:url(FontLocationOnServer);

}

Затем вы можете использовать тег font-family для вызова вашего шрифта в любом месте HTML-документа.

Стилизация шрифтов с помощью HTML и CSS

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

Примечание. Если вы работали со старыми версиями HTML, возможно, вы помните тег <font>. Он больше не поддерживается и не должен использоваться. Вместо этого вы можете стилизовать текст с помощью CSS или элемента стиля HTML.

Во-первых, вы можете изменить шрифт с помощью цветовых кодов. Вы можете использовать название цвета,например «красный», код RGB или шестнадцатеричное значение. Это устанавливается свойством color:

p{

color:blue;

}

Или в отдельном элементе стиля HTML:

<p style="color:blue;">Text.</p>

Цвет фона задается так же, но с использованием атрибута background-color.

p{

background-color:blue;

}

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

p{

font-size:16px;

}

Или же:

<p style="font-size:200%;">Text.</p>

Установка размера шрифта с помощью CSS

И последнее — стильи толщина шрифтаили курсив и полужирный шрифт. Для наклонного текста используйте тег «курсив».

.italic{

font-style:italic;

}

И для жирного: 

.bold{

font-weight:bold;

}

Установка стиля шрифта с помощью CSS.

Вместо этого вы также можете использовать HTML-теги. Для курсива можно использовать:

<em>

для текста, который передает акцент, или используйте:

<i>

А для жирного шрифта используйте:

<b>или же <strong>

Например:

<b>Bold Text</b>

или же

<strong>I'm of special importance.</strong>

Где взять HTML-шрифты?

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

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

• Adobe Fonts предлагает тысячи шрифтов с любой подпиской Creative Cloud. С другими службами (которые, по крайней мере, не полагаются на шрифты с открытым исходным кодом, такие как Google Fonts), вам часто нужно беспокоиться о лицензировании. Эти шрифты разрешены для использования в любых проектах, личных или коммерческих.
• Fonts.com предлагает широкий выбор шрифтов как для настольных компьютеров, так и для использования в Интернете. Они предоставляют вам код, необходимый для размещения его на вашем сайте. Проблема в том, что существует несколько разных лицензий, и это может немного сбивать с толку. Оплата производится на основе единовременной платы или модели с оплатой по факту.
• TypeNetwork предлагает высококачественные шрифты для серьезных проектов с различными вариантами лицензирования. Приобретайте шрифты для ПК, Интернета, приложений или ePub. 
• Еще до появления Google Fonts в Font Squirrel  можно было найти бесплатные шрифты с коммерческой лицензией для использования в любом проекте. У него довольно большой выбор, но, к сожалению, нет возможности для хостинга шрифтов. Вам нужно будет скачать шрифты и загрузить их на свой сайт вручную. Не все шрифты также оптимизированы для Интернета, но вы можете попробовать генератор веб-шрифтов .

10 лучших HTML-шрифтов

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

1. Arial

Пример шрифта Arial.

Arial — самый известный из всех шрифтов. Он не самый красивый, но простой и полезный в самых разных ситуациях.

2. Times New Roman

Times New Roman также является чрезвычайно распространенным шрифтом. Лучше всего, если у вас более формальный сайт. Этот шрифт с засечками не особенно интересен, но и не отвлекает.

3. Palatino

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

4. Verdana

Verdana известна тем, что ее очень легко читать, и она продолжает отлично смотреться даже при больших размерах. Этот без засечек — хорошая альтернатива Arial.

5. Courier New

Пример шрифта Courier New.

Напоминающий текст на старой пишущей машинке, Courier New — отличный моноширинный дизайн для сайтов, которым нужен старомодный, но разборчивый вид.

6. Calibri

Пример шрифта Calibri.

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

7. Georgia

Пример шрифта Georgia.

Этот шрифт с закругленными засечками вдохновлен аналогичным веб-шрифтом Garamond. Если вам нужен формальный шрифт, не такой серьезный, как Times New Roman, это хороший выбор.

8. Garamond

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

9. Didot

Пример шрифта Didot.

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

10. Tahoma

Пример шрифта Tahoma.

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

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

Резюме

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

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

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

Источник