В этой статье я расскажу как установить нестандартные шрифты на свой сайт. Однозначно при использовании необычных шрифтов ваш сайт будет выделяться, но и перебарщивать с этим нельзя, иначе можно просто отпугнуть пользователя. Также мы рассмотрим откуда лучше брать шрифты чтобы они быстрее загружались на странице и не тормозили загрузку самого сайта.
Как уже понятно из названия мы будем использовать шрифты сервиса Google Fonts. Он предоставляет широкие возможности выбора, установке и настройке шрифтов.
Кстати, я писал раньше о сервисе, с помощью которого можно создать свой собственный шрифт. Возможно он вас заинтересует — Сервисы которые должен знать каждый веб-дизайнер.
Знакомство с сервисом Google Fonts — Оригинальные шрифты на сайте
Первым делом перейдите на сам сайт — Google Fonts. Когда вы зайдете на данный сервис, вы увидите страницу, где справа находится фильтр. С помощью данного фильтра можно подбирать шрифт и устанавливать его настройки по вашему желанию. Обратите внимание на поле «Script«. Здесь вы можете выбрать нужный вам шрифт, т.е. русские, английские буквы и так далее.
На изображении ниже представлены вкладки, с помощью которых можно выбирать каким образом вы хотите видеть предпросмотр шрифта: слово, предложение, параграф или постер.
И последнее это центральная часть. Это и есть предпросмотр выбранного шрифта. Когда вы с помощью фильтров будете изменить настройки, следовательно будет меняться и центральная часть.
Установка шрифта
После того как вы выбрали и настроили понравившийся скрипт, его необходимо установить на сайт. Для этого нажимаем на кнопку как на изображении ниже:
Затем вы попадаете на страницу где есть еще несколько настроек, но если вам всё устраивает, то ничего не меняйте. Там где идет 3-й пункт, вам необходимо скопировать ту строку и вставить себе на сайт между тегами <head>:
1 2 3 4 5 6 | <html> <head> <link href='http://fonts.googleapis.com/css?family=Signika+Negative' rel='stylesheet' type='text/css'> </head> ...... </html> |
После этого, в файле стилей прописать следующие строки(которые в 4-й пункте) тому блоку, в котором вы хотите видеть данный стиль текста:
1 | font-family: 'Signika Negative', sans-serif; |
Вывод
Вот и весь процесс установки шрифта себе на сайт. Всё очень легко и просто. И поверьте, с серверов Google шрифты будут грузиться намного быстрее, чем с вашего хостинга. Также как и библиотека jQuery, поэтому все подгружают ее оттуда.