Здравствуйте уважаемые читатели моего блога! Сегодня будет тема подключения шрифтов в css, как локально так и с помощью google fonts. Правильное использование шрифтов в веб-дизайне играет важную роль в создании привлекательного и читаемого контента.
Подключение скаченных шрифтов из папки с помощью @font-face
Структура папок
- Index.html
- style.css
- fonts (папка)
Шаг первый
Скачиваем нужный нам шрифт, я буду качать с сайта https://webfonts.pro так как в архиве уже присутствуют все нужные нам форматы такие как TTF, EOT, WOFF и файл стилей с готовым кодом что очень удобно. !Важно! в самом файле стилей прописать пути к шрифтам иначе они могут не загрузится, ниже мы с вами это сделаем. Эксперименты будем проводить на шрифте Open Sans
Шаг второй
Качаем к себе в папку fonts все три файла TTF, EOT, WOFF, выглядеть это будет вот так
Шаг третий
Кликаем по кнопке WEB
Шаг четвертый
Копируем код для вставки в свой файл стилей style.css, строку font-family применяем к нужному тегу, в моем случае я применил к заголовку <h1>
Готовый код
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <h1>Тестовый шрифт</h1> </body> </html> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@font-face { font-family: "Open Sans ExtraBold Italic"; src: url("fonts/OpenSans-ExtraBoldItalic.eot"); src: url("fonts/OpenSans-ExtraBoldItalic.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-ExtraBoldItalic.woff") format("woff"), url("fonts/OpenSans-ExtraBoldItalic.ttf") format("truetype"); font-weight: normal; font-style: normal; } h1 { font-size: 90px; font-family: "Open Sans ExtraBold Italic"; text-align: center; } |
Результат
Подключение шрифта с помощью Google fonts
Шаг первый
Подключать шрифт мы будем с помощью сервиса google fonts. Переходим на сайт и выбираем шрифт, я выберу тот же шрифт только с несколькими начертаниями для примера. В строке поиска вбиваем нужный нам шрифт
Шаг второй
С помощью плюсиков добавляем нужные нам начертания, они будут отображаться справа в колонке, этот код мы и будем использовать в своем файле style.css. Важно поставить галочку @import
Шаг третий
Переходим в наш файл style.css и самой первой строчкой наш импорт, обратите внимание вставляем без тега <style></style>
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Подключение шрифта google fonts</title> </head> <body> <h1>Тестовый шрифт</h1> </body> </html> |
style.css
|
1 2 3 4 5 |
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600;800&display=swap'); h1{ font-family: 'Open Sans', sans-serif; } |
Вот так легко и просто можно подключать шрифты как локально так и с помощью сервисов.
