---
id: bad87fee1348bd9aedf08807
title: Імпорт шрифтів з Google Font
challengeType: 0
videoUrl: 'https://scrimba.com/c/cM9MRsJ'
forumTopicId: 18200
dashedName: import-a-google-font
---
# --description--
На доповнення до загальних шрифтів, які є в більшості операційних систем, ми також можемо встановити нестандартні, користувацькі веб-шрифти для використання на нашому сайті. У Інтернеті існує багато джерел веб-шрифтів. Але для прикладу ми використаємо бібліотеку Google Fonts.
[Google Fonts](https://fonts.google.com/) є безкоштовною бібліотекою веб-шрифтів, які можна використати у CSS, посилаючись на URL-адресу шрифту.
Що ж, давайте почнемо імпортувати і застосувати шрифт Google (зауважте, що якщо Google заблокований у вашій країні, то вам потрібно пропустити це завдання).
Щоб імпортувати шрифт Google, можна скопіювати URL-адресу шрифту з бібліотеки Google Fonts, а потім вставити її у свій HTML. У цьому завданні ми імпортуємо шрифт `Lobster`. Для цього скопіюйте наступний фрагмент коду і вставте його у верхній частині вашого редактора коду (перед відкриттям елемента `style`):
```html
```
Тепер ви можете використовувати шрифт `Lobster` у вашому CSS, скориставшись `Lobster` як FAMILY_NAME як і у прикладі нижче:
```css
font-family: FAMILY_NAME, GENERIC_NAME;
```
GENERIC_NAME не є обов'язковим, і є резервним шрифтом, якщо інший вказаний шрифт недоступний. Це розглядається в наступному завданні.
Назви шрифтів чутливі до регістру і повинні бути поміщені в лапки, якщо у назві є пробіл. Наприклад, вам потрібні лапки для використання шрифту `"Open Sans"`, але для шрифту `Lobster` — ні.
# --instructions--
Імпортуйте шрифт `Lobster` на вашу веб-сторінку. Потім скористайтеся селектором елементів для встановлення `Lobster` у якості `font-family` для вашого елемента `h2`.
# --hints--
Вам слід імпортувати шрифт `Lobster`.
```js
assert($('link[href*="googleapis" i]').length);
```
Елемент `h2` має використовувати шрифт `Lobster`.
```js
assert(
$('h2')
.css('font-family')
.match(/lobster/i)
);
```
Ви повинні використовувати селектор елементу `h2`, щоб змінити шрифт.
```js
assert(
/\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi.test(
code
)
);
```
Елемент `p` все ще повинен використовувати шрифт `monospace`.
```js
assert(
$('p')
.css('font-family')
.match(/monospace/i)
);
```
# --seed--
## --seed-contents--
```html
