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

шрифты для сайтаЗдравствуйте, уважаемые читатели!

В предыдущей статье «Применение стилей CSS в редакторе WordPress» я писал о том, как нестандартным образом, используя строчные CSS-стили, оформить контент на сайте под управлением WordPress. Используя стили можно, в том числе, изменять и шрифт, применяемый в тексте.

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

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

Можно, но есть определенные условия.

Стандартные и нестандартные шрифты

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

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

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

Как же решить эту проблему?

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

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

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

В этой статье мы рассмотрим подробнее первый способ.

Работа с сервисом Google Fonts

Google FontsНачнем с сервиса Google Fonts, как самого известного и надежного.

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

Google FontsНа сайте Google Fonts, как видно из скриншота, на данный момент в коллекции содержится 708 шрифтов, но не все они нам подходят. Для русскоязычных сайтов нужны шрифты, поддерживающие кириллицу. Слева располагаются фильтры для выбора, где в выпадающем списке Script выбираем Cyrillic, после чего остается уже 61 вариант. Из них мы и выбираем. Понравившиеся шрифты добавляем в коллекцию, нажимая на кнопку Add collection.Add collection

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

Далее переходим к последнему пункту – кнопка Use. Здесь можно скопировать код для подключения шрифта к сайту.код для подключения шрифта к сайту

Этот код следует вставить на HTML-страницу вашего сайта между тэгами <head> и </head>. Для сайтов на WordPress эти тэги находятся в файле заголовка header.php. В пункте 4 копируется код для описания стиля CSS.код для описания стиля CSS

Как видите, я выбрал три варианта, и если теперь в HTML-редакторе WordPress набрать такой код:

1
2
3
<p style="font-family: 'Poiret One', cursive; font-size: 20px;">Этот текст оформлен нестандартно. Poiret One. </p>
<p style="font-family: 'Russo One', sans-serif; font-size: 20px;">Сделать это можно двумя основными способами. Russo One. </p>
<p style="font-family: 'Marck Script', cursive; font-size: 20px;">Рассмотрим подробнее первый способ. Marck Script. </p>

то на странице это будет выглядеть так:

Этот текст оформлен нестандартно. Poiret One.

Сделать это можно двумя основными способами. Russo One.

Рассмотрим подробнее первый способ. Marck Script.

 Работа с сервисом AllFont.ru

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

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

После этого можно скопировать коды для вставки на сайт. Все делается аналогично тому, как делали на сайте Google Fonts. Я для примера выбрал шрифт AGZeppelin-Roman, посмотрите, как он выглядит.Выбранный шрифт

1
<p style="font-family: 'AGZeppelin-Roman', arial; font-size: 20px;"> Добро пожаловать в крупнейшую библиотеку AllFont.ru </p>

Добро пожаловать в крупнейшую библиотеку AllFont.ru

Надеюсь, что статья оказалась для вас полезной. Если так, подписывайтесь на обновления блога, так как готовятся новые полезные статьи.

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

До скорых встреч.

Еще советую почитать по этой теме:

Оптимизация сайта с помощью схемы data: URL
Здравствуйте, уважаемые читатели! В сегодняшней статье я хочу рассказать еще об одном методе оптимизации сайта, в основе которого лежит схема, которую обычно называют data: URL. ...
Адаптивный дизайн или мобильная версия
Совсем недавно, буквально 10 лет назад, веб-дизайнеры при создании сайтов ориентировались на определенную среднюю ширину экрана монитора пользователей. Сначала наиболее распространенное разрешение было 800*600, ...
Какой должна быть структура сайта?
Здравствуйте! Как вы думаете, какое значение в продвижении сайта имеет его структура? Я считаю это понятие очень важным, уверен, что от его структуры зависит очень ...
Уроки Adobe Muse
Здравствуйте, уважаемые читатели блога kviter.ru! В сегодняшней статье я хочу посоветовать уроки для изучения современного визуального редактора Adobe Muse. Скачав уроки бесплатного курса Adobe Muse, вы можете ...
Какой хостинг выбрать?
Каждый человек, создающий сайт или блог, на определенном этапе задает себе вопрос: «Какой хостинг выбрать?» Компаний предлагающих услуги по размещению Интернет-ресурсов сейчас очень много, но ...
Очень плохоПлохоСреднеХорошоОтлично (голосов: 1 в среднем: 5,00 из 5)
Загрузка...

4 комментариев к “Как использовать нестандартные шрифты для сайта

  1. Здравствуйте, Владимир!
    Спасибо за полезный совет! Мой вопрос, возможно, покажется Вам наивным, тем не менее я его задам. При внесении изменений в HTML сайта изменится шрифт всех записей или это будет значить, что я смогу, при желании, изменить шрифт определённой части текста?
    С уважением и надеждой на ответ, Ольга Карасёва

    Ответить
  2. Очень полезный пост. Действительно, иногда хочется проявить индивидуальность, особенно при работе в фотошоп. Хотя, это не по теме.
    Спасибо автору за дельные советы.
    А как мой вопрос — как установить Фидбурнер? Вроде обещалась статья?
    На моём сайте это первостепенная задача. Но не доходят руки, нужен «пендаль»

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *