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

/ 👁 3408

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

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

Что же делать? Отказаться от использования нестандартных шрифтов и пользоваться только стандартными шрифтами?

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

Подключаем любые шрифты для сайта!

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

В выпадающем списке Script выберете Cyrillic (это для русских букв, а если будете писать на английском языке, то соответственно оставляйте Latin). А теперь выбирайте любой шрифт для Вашего сайта, который придётся Вам по вкусу.
ресурс от Google

После того, как шрифт будет выбран, нажмите на кнопку «Add to collection», после чего шрифт будет добавлен в коллекцию.
добавляем шрифт в коллекцию

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

После того, как Вы установите все нужные параметры для выбранного шрифта нажимайте на кнопку «Use». Именно на этой вкладке все, что нам нужно для того, чтобы подключить выбранный шрифт для своего веб сайта. Здесь в пункте номер 2 отметьте галочкой Cyrillic (если Вы будете использовать выбранный шрифт для русских букв). Из пункта под номером 3 скопируйте сформированный для Вас код для подключения шрифта.
копируем код для подключения шрифта

Вставьте скопированный код в код Вашей страницы между тегами head. Теперь вернитесь на сайт и скопируйте содержимое пункта 4 и в стилях вашей веб страницы примените к нужному элементу. В моем примере я применяю этот шрифт к тегу h3.

 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<link href=’http://fonts.googleapis.com/css?family=Seymour+One&subset=cyrillic,latin’ rel=’stylesheet’ type=’text/css’>
<style>
h3{font-family: ‘Seymour One’, sans-serif;}
</style>
<title>Untitled Document</title>
</head>
<body>
<h3>Не ограничивай себя при выборе шрифта!</h3>
</body>
</html>

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

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

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

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

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

Leave a Reply