Шрифты Google fonts — как сделать красивые шрифты на сайте html

На сайтах html, как правило, встречаются стандартные шрифты. Например

Arial;
Verdana;
Times New Roman;
Georgia;
Trebuchet MS;

Некоторым вебмастерам они покажутся через чур простыми и скучными, поэтому многие ищут варианты как можно сделать шрифт на сайте необычным, красивым и т.п. Можно самостоятельно искать шрифты на просторах интернета или гораздо проще воспользоваться самым крупным сервисом по шрифтам Google Fonts: https://fonts.google.com

Что такое Google fonts

Google fonts — сервис универсальных шрифтов для сайта. Шрифт можно откорректировать в режиме онлайн и сделать его таким, каким вы захотите, после чего подключить его к сайту и использовать

Для начала рассмотрим небольшую инструкцию как создать шрифт на Google fonts.

Как создать шрифт на Google fonts

Перейдя на страницу https://fonts.google.com Вам предстоит либо выбрать готовый шрифт, либо создать свой. Рассмотрим кратко элементы меню.

В левом блоке можно сразу с помощью фильтра отсеять ненужные шрифты:

Серия шрифтов Serif (с засечками)
Серия шрифтов Sans Serif (без засечек)
Серия шрифтов Display (дисплей)
Серия шрифтов Handwriting (рукописный)
Серия шрифтов Monospace (моноширинные)

Потом так же можно отсеять по следующим критериям:

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

Например, вам понравился следующий шрифт:

Как добавить шрифт Google fonts на сайт

Чтобы подключить шрифт от Google fonts к себе на сайт даже не обязательно использовать правило @font-face. Делается все проще.

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

После выбора шрифта Google Вам сам предложит 2 варианта html-кода для вставки (standart и import). Чаще всего используют первый вариант через link:

<head>
...
<link href="http://fonts.googleapis.com/css?family=newfamily" rel="stylesheet">
...
</head>

А в CSS надо прописать

body {
	font-family: newfamily, Ariel;
	}

Стоит так же обратить внимание на параметр во вкладке "Customize" - Load Time (Fast). Попробуйте включать и отключать галочки. В зависимости от этого загрузка будет либо быстрая, либо медленная.

Естественно нужно стремится к быстрой загрузке.

Примечание

Несмотря на удобство использования шрифтов от Google fonts, есть недостаток: шрифт нужно подгружать на сайт. Это в свою очередь создает лишнюю зависимость от качества работы сервера fonts.googleapis.com. По моему опыту я знаю, что иногда он тормозит работу сайта. Я полностью отказался от использования сторонних шрифтов.

← Перейти в каталог html уроков и советов