Ноябрь 1, 2019 Запись была обновлена
Возможности Google Fonts или оригинальные шрифты на сайте
В этой статье я расскажу как установить нестандартные шрифты на свой сайт. Однозначно при использовании необычных шрифтов ваш сайт будет выделяться, но и перебарщивать с этим нельзя, иначе можно просто отпугнуть пользователя. Также мы рассмотрим откуда лучше брать шрифты чтобы они быстрее загружались на странице и не тормозили загрузку самого сайта.
Как уже понятно из названия мы будем использовать шрифты сервиса 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, поэтому все подгружают ее оттуда.
Успехов!
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Очень интересные и поучительные статьи! Пишите больше комментариев задавайте больше вопросов чтобы этот блог радовал нас своими обучающими статьями и рекомендациями!
Мы для Себя нашли много интересной и любопытной информации и фактов!
Спасибо! Комментарии действительно мотивируют писать еще статьи. Ведь когда понимаешь что материал кому-то пригодился очень приятно и знаешь что не зря писал :).
Юрий, Я не поняла в какой файл нужно вставить скрипт. Извините, я новичок. Мне нужно в формате делай:
1).
2).
3).
То что для Вас элементарно, мне не понятно(((( поясните, пожалуйста. У меня сайт на WP. Купила тему avada.
Здравствуйте, Ольга!
Так как вы приобрели платную тему, возможно там есть функционал, который позволяет изменять шрифт на сайте без изменения исходного кода и дополнительных скриптов.
Тема "Avada" это очень популярная и многофункциональная тема для WordPress. При покупке темы внутри архива должна находится документация. Скорее всего она на английском, но там точно должна быть информация о том, как настроить тему по своему желанию, а также как использовать шрифты.