Лого www.SiteHere.ru

Возможности Google Fonts или оригинальные шрифты на сайте

оригинальные шрифты на сайте

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

Как уже понятно из названия мы будем использовать шрифты сервиса Google Fonts. Он предоставляет широкие возможности выбора, установке и настройке шрифтов.

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

Знакомство с сервисом Google Fonts — Оригинальные шрифты на сайте

Первым делом перейдите на сам сайт — Google Fonts. Когда вы зайдете на данный сервис, вы увидите страницу, где справа находится фильтр. С помощью данного фильтра можно подбирать шрифт и устанавливать его настройки по вашему желанию. Обратите внимание на поле «Script«. Здесь вы можете выбрать нужный вам шрифт, т.е. русские, английские буквы и так далее.

Фильтр Google Fonts

На изображении ниже представлены вкладки, с помощью которых можно выбирать каким образом вы хотите видеть предпросмотр шрифта: слово, предложение, параграф или постер.

Предпросмотр Google Fonts

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

Шрифты Google Fonts

Установка шрифта

После того как вы выбрали и настроили понравившийся скрипт, его необходимо установить на сайт. Для этого нажимаем на кнопку как на изображении ниже:

Установка Google Fonts

Затем вы попадаете на страницу где есть еще несколько настроек, но если вам всё устраивает, то ничего не меняйте. Там где идет 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, поэтому все подгружают ее оттуда.

Успехов!

Возможности Google Fonts или оригинальные шрифты на сайте 3.00/5 (60.00%) 2 голос(ов)

Понравилась статья - расскажи друзьям! :)

4 комментария к записи
  • Геннадий Кузнецов

    Очень интересные и поучительные статьи! Пишите больше комментариев задавайте больше вопросов чтобы этот блог радовал нас своими обучающими статьями и рекомендациями!
    Мы для Себя нашли много интересной и любопытной информации и фактов!

     
    • Юрий

      Спасибо! Комментарии действительно мотивируют писать еще статьи. Ведь когда понимаешь что материал кому-то пригодился очень приятно и знаешь что не зря писал :).

       
  • Olga

    Юрий, Я не поняла в какой файл нужно вставить скрипт.  Извините, я новичок. Мне нужно в формате делай:

    1). 

    2).

    3). 

    То что для Вас элементарно, мне не понятно((((  поясните, пожалуйста. У меня сайт на WP. Купила тему avada. 

     
    • Юрий Немец

      Здравствуйте, Ольга!

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

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

       

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

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