• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
Стоимость баннера за месяц: 30$ (подробности)
Главная → HTML уроки и советы → Шрифты Google fonts

Шрифты Google fonts — подробное описание

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

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

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


Что такое Google fonts

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

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

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

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

Главная страница Google fonts

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

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

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

Выбор параметров шрифтов Google fonts

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

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

Выбрали следующий шрифт Google fonts


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

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

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

Выбор параметров шрифтов Google fonts

После выбора шрифта 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

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


Примечание

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



Читайте также:
• Какой выбрать шрифт для сайта
• Добавление счетчика посещений на сайт
• HTML тег <!-- --> (комментарии)
• <!DOCTYPE> в html
• Что такое JavaScript
• Метатег viewport
• Метатег charset
• Свойство css border
• Свойство css background
• Свойство css transition

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

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2022 - Zarabotat-Na-Sajte.ru