1. Web-дизайн.

Внешние виджеты

1.1Общая информация
Привет! Сегодняшнее занятие будет на тему внешних виджетов. Мы узнаем, что же это такое, как
использовать и что самое важное - как встроить эти виджеты в свой проект, поэтому… Поехали!
Напоминаю, что ты можешь пользоваться таким вот мини-конспектом, чтобы
освежить свои знания перед выполнением домашнего задания или если ты по какой-то
причине пропустил занятие.
 
На занятии мы изучили следующие полезные штуки, а именно:
1. добавление сторонних шрифтов;
2. виджет карты (на примере Google Maps);
3. виджет видео (на примере YouTube);
4. виджет музыки (на примере Яндекс.Музыки);
5. виджет документов (На примере Scribd.com).
 
Давай теперь обо всём по порядку.

1.2Сторонние шрифты
Сегодня мы будем работать в формате песни “Хей, посмотри на меня, делай как я!”. Если вдруг
не знаешь эту песню, это означает следующее - для каждого виджета будет пошаговая
инструкция, тебе остаётся лишь выполнить все шаги. :)
Начнём. На прошлом уроке мы научились назначать элементам те шрифты, которые установлены
в нашей операционной системе, которые мы видим списком, когда работаем в текстовом
редакторе.

На самом деле, на сайт можно добавлять не только те шрифты, к которым вы давно привыкли.
Есть специальный сервис Google Fonts, на котором хранится огромное количество интересных и
не очень шрифтов.
Самое приятное в этой новости то, что мы можем без особого труда брать эти шрифты к себе на
сайт. Как это делать? Давай разберемся прямо сейчас!
 
1. Перейди на сайт https://fonts.google.com и найди там шрифт, который тебе нравится.
2. Видишь красный плюсик в правом верхнем углу? Жми на него скорее :)

3. Разверни появившуюся черную панельку и внутри нее нажми на кнопочку “@import”.

 
  
4. Найди фрагмент кода, начинающийся с @import. Скопируй его и вставь в самое
начало CSS-файла (Очень важно вставлять этот код в самое начало, иначе ничего не
заработает)

 
Всё! Шрифт подключен :) Теперь его можно использовать как и системные шрифты при помощи
свойства font-family.