Как подключить google fonts

Подключение шрифтов google fonts

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

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

Зайти на страницу сервиса можно по адресу Google Fonts
Вот как он выглядит на момент написания статьи:

сервис google fonts

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

Поиска шрифта в google fonts

Например, я поищу шрифт под названием Open Sans. При вводе имени шрифта Вы сразу заметите что число, которое находится в тексте над этим полем, начнет изменяться.

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

Результаты поиска шрифта open sans в google fonts

Категории шрифтов

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

  • Serif ( С засечками )
  • Sans Serif ( Без засечек )
  • Display ( Дисплей )
  • Handwriting ( Рукописный )
  • Monospace ( Моноширинные )
    • Все символы в шрифтах из этого семейства, одинаковые по ширине.

Категории шрифтов

Идем дальше. Ниже списка с категориями есть еще пару параметров для выбора шрифта. А именно:

  • Thickness (Толщина)
  • Slant (Уклон)
  • Width (Ширина)

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

Параметры шрифтов

Ниже параметров есть список азбук, такие как Cyrillic (Кириллица), Latin (Латиница) и другие.

Азбука шрифтов

Дальше идет кнопка для сброса настроек. После нажатия на эту кнопку все параметры применят значение по умолчанию.

Кнопка сброса настроек поиска шрифта

По умолчанию в результатах поиска отображается только один стиль найденного шрифта. Если хотим увидеть все стили, то нажимаем на кнопку Show all styles. Данная кнопка находится ниже кнопки сброса настроек.

Отобразить все начертания у найденных шрифтов

После нажатия на эту кнопку, шрифты из результата поиска будут, отображаться со всеми стилями. А название самой кнопки поменяется на Hide all styles. После повторного нажатия, шрифты будут отображаться в обычном виде.

Шрифт Open Sans из google fonts со всеми его стилями

Настройка отображения результатов поиска

Теперь перейдем к верхней панели сервиса, она находится над результатами. Здесь Вы можете выбрать, каким образом отобразить текст внутри шрифтов из результата. Есть 4 варианта:

  • Word – только дно слово
  • Sentence – целое предложение
  • Paragraph – Целый параграф
  • Poster - Плакат

Ниже есть панель, где можно ввести свой текст и настроить его размер. Этот текст отобразится в результатах. Также в этой панели есть возможность сортировки результатов.

Верхняя панель настройки текста в google fonts

Добавление шрифта google fonts на сайт

Идем дальше. Как Вы заметили внизу у каждого шрифта, есть три маленькие кнопки серого цвета и одна большая кнопка синего цвета, с надписью Add to collection, то есть добавить в коллекцию.

Кнопка добавления шрифта в коллекцию

Рассмотрим с начало первые три кнопки. Первая кнопка со стрелкой вниз, делает абсолютно то же самое что и кнопка Show all styles, то есть показывает все стили(начертания) шрифта.

При наведении курсора мыши над второй кнопки, появляется надпись Quick use, что на русском означает быстрое использование.

После нажатия на эту кнопку попадаем на страницу с инструкцией как установить выбранный шрифт на своем сайте. В первом пункте инструкции есть возможность проверить, как выбранные начертания шрифта действуют на скорость загрузки страницы. Для примера я выбрал начертания Normal 400, Bold 700 и Extra-Bold 800.

Как шрифты google fonts действуют на скорость загрузки страницы

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

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

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

Способы подключения google шрифт
  1. Способ Standard. Подключение делается с помощью тега link, который предназначен именно для установления связи, между текущей страницей и внешними документами. Данный код вставляется в начале тега head.
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet" type="text/css" />
    
  2. Второй способ это подключение с помощью эт-правило @import. Данное правило импортирует содержимое указанного файла в текущий css файл. Представленный код, необходимо добавить вначале внешнего файла стилей.
    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,800);
    
  3. И последний способ, это через JavaScript.
    <script type ="text/javascript">
        WebFontConfig = {
            google: { families: [ 'Open+Sans:400,700,800:latin' ] }
        }
    
        (function(){
            var wf = document.createElement('script');
            wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
        })();
    </script>
    

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

Название подключенного шрифта находится в значение атрибута href тега link

Для примера установим шрифт, для какого-то блока div с идентификатором content, в котором находится некий текст. В стили пишем следующий код:

#content{
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
}

Через свойство font-weight, устанавливаем жирность шрифта.

Вернемся к результатам поиска. Для этого вначале странице с инструкцией, нажимаем на кнопку с названием Go back and add more fonts.

При наведении мыши на третью кнопку, появляется текст Pop out, то есть выскочить. Нажимаем на нее и видим, что открылось новое окно с подробным описанием шрифта.

Здесь отображается набор символов (Character set), которые присутствует в шрифте, статистика использования шрифта (Statistics), сопряжение с другим шрифтом (Pairings) и ссылка на страницу где есть возможность попробовать шрифт в действии (Try in Typecast).

Подробное описание шрифта google fonts

И последняя кнопка Add to collection, что в переводе означает добавить в коллекцию. После нажатия на эту кнопку, выбранный шрифт добавится в некую коллекцию. А надпись самой кнопки изменится на Remove from Collection, то есть удалить из коллекции.

Как только в коллекцию добавляется какой-то шрифт, в фильтры поиска сразу появляется синее звездочка с надписью Show collection only, то есть отобразить только содержимое коллекции.

Отобразить только коллекцию с выбранными шрифтами

Содержимое коллекции также отображается и внизу страницы. Для примера добавим в коллекцию пару нужных шрифтов, а именно шрифты Roboto и Open Sans.

Содержимое коллекции google fonts

Для того чтобы свернуть/показать панель коллекции, кликаем на жирное слово Collection в левом верхнем углу панели.

Удалить шрифты можно поочередно, нажимая на крестик, который находится рядом с названием шрифта, которого хотим удалить или же можно удалить все шрифты сразу, для этого нажимаем на ссылку Remove all families from Collection.

В правом верхнем углу окна коллекции, есть три вкладки Choose(Выбрать), Review(Обзор) и Use(Использование). Choose это текущая страница выбора шрифтов.

При нажатии на вкладку Review, откроется страница детального обзора шрифтов. Здесь можно увидеть, как выглядят выбранные шрифты, посмотреть какие символы входят в каждом шрифте (Вкладка Character Set), сравнить выбранные шрифты (вкладка Compare), или прочитать описание каждого шрифта (Вкладка Description). На этой же странице есть и другие возможности, но они не так уж важны.

Перейдя во вкладку Use, откроется уже знакомая нами страница, на которой можно сделать следующее действия:

  1. Протестировать, как выбранные шрифты влияют на скорость загрузки страницы.
  2. Выбрать дополнительные наборы символов.
  3. Скопировать код для установки шрифта google fonts, который необходимо добавить вначале HTML или CSS файла, зависит от выбранного Вами способа подключения.
  4. Посмотреть пример как использовать добавленные шрифты.

Как сохранить коллекцию и как скачать шрифты google fonts

И последнее о чем я хотел Вам рассказать, это о том, как сохранить коллекцию и как скачать шрифты в google fonts.

В самом начале страницы Use (Использование), в правой части, над серой рамкой, есть две кнопки.

Кнопка сохранения коллекции и кнопка скачивания шрифтов в google fonts

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

Сохранение коллекции в google fonts

А после нажатия на вторую кнопку, со стрелкой вниз, также откроется окошко, но уже со ссылками для скачивания шрифтов. Вот как она выглядит:

Скачивание шрифтов google fonts

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

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

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

И последнее возможность, которое дает нам сервис google fonts, в этой окошке, это скачать все семейства шрифтов, которые есть на сервисе, включая и их исходные файлы.

Для этого необходимо нажать на ссылку Google Fonts Github project. И после этого в новой вкладке откроется страница на github, где находится архив со шрифтами, которые есть на проекте google fonts.

Скачивание всех семейств шрифтов google с проекта github

Для того чтобы скачать архив со шрифтами, нажимаем на кнопку Download ZIP и сразу же выскочит окошко скачивания архива.

И здесь я завершаю эту длинную статью. Теперь Вы знаете, как подключить и как использовать шрифты google fonts. Пользуйтесь на здоровье!

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

Похожие статьи:

Видео:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Delivered by FeedBurner

Поддержите пожалуйста мой проект!

%next_previous_article%

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в:

Добавляйтесь в мои группы:

Подпишитесь на мои каналы:

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!

Дата добавления: %date%