Google Fonts — это бесплатная служба Google, которая обеспечивает доступ к тысячам шрифтов. Все доступные шрифты находятся под лицензиями с открытым исходным кодом, что означает, что их можно бесплатно использовать как в коммерческих, так и в некоммерческих проектах.
В этой статье мы расскажем, как использовать Google Fonts на веб-странице. Смотрите, как сейчас выглядит наша стандартная веб-страница:
Вот ее шаблонная HTML-разметка:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My web page</title> </head> <body> <h1>Welcome to my website</h1> </body> </html>
Выглядит довольно скучно, не так ли? Давайте оживим ее немного при помощи интересных шрифтов.
Выбор шрифта
Пришло время выбрать шрифт для нашей страницы. Зайдите на fonts.google.com и выберите понравившийся шрифт, нажав маленькую кнопку +. Мы будем использовать шрифт Karla. После того, как вы выбрали свой шрифт, в правой части страницы появится меню.
Есть два способа импортировать понравившийся шрифт. Первый метод: скопируйте код в поле под меткой Standard. Теперь вернитесь к своей разметке и добавьте скопированный код и тег style в заголовок документа, как показано ниже.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My web page</title> <link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet"> </head> <body> <h1>Welcome to my website</h1> </body> </html>
Примечание: Приведенный выше пример URL показывает, что Google Fonts теперь поддерживает свойство font-display.
Если у вас уже есть отдельная таблица стилей CSS, скопируйте код под меткой @import и добавьте его в верхнюю часть таблицы следующим образом.
@import url('https://fonts.googleapis.com/css?family=Karla&display=swap'); .element { /* ... */ }
Использование шрифтов
Итак, мы импортировали шрифт, теперь пришло время попробовать его использовать. Давайте настроим body нашей HTML-разметки на использование шрифта Karla:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My web page</title> <link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet"> <style> body { font-family: 'Karla', sans-serif; } </style> </head> <body> <h1>Welcome to my website</h1> </body> </html>
Если мы сейчас взглянем на нашу страницу, она будет выглядеть так:
Теперь она выглядит гораздо лучше.
Использовать Google Fonts очень просто. Теперь вы можете сделать свой сайт гораздо привлекательнее и красивее.
Читайте также: