Найти в Дзене
О технологиях

Как подключить внешний шрифт на веб-страницу?

Подключать будем, используя директиву @import, можно юзать и @font-face, конечно. Но об этом я расскажу в другой инструкции. Итак,... 1. Перейдите на fonts.google.com 2. Напишите в поисковой строке название семейства шрифтов, которое хотите подтянуть в проект 3. Кликаете на шрифт, который Вас интересует. После этого Вас перекинет на подробную страницу 4. Выбираете стиль. Напротив подходящего есть значок +. Кликаете на него 5. Кликаете на кнопку просмотра(если вы добавили новый стиль шрифта, то появится красная точка в верхнем левом углу кнопки) 6. Будем подключать стиль, используя директиву @import. Поэтому переключитесь на @import. 7. Копируете все кроме тегов <style></style> 8. Вставляете скопированный import в файл css 9. Копируете правило, которое нужно подключить к тексту, чтобы шрифт применился 10. Подключаем правило. Можно подключить к тексту, а можно и к родительскому контейнеру, шрифты наследуются. Спасибо, что дочитали до конца. Вы меня очень поддержите, если поставите "

Подключать будем, используя директиву @import, можно юзать и @font-face, конечно. Но об этом я расскажу в другой инструкции.

Итак,...

1. Перейдите на fonts.google.com

2. Напишите в поисковой строке название семейства шрифтов, которое хотите подтянуть в проект

3. Кликаете на шрифт, который Вас интересует. После этого Вас перекинет на подробную страницу

Подробная страница с различными начертаниями шрифта
Подробная страница с различными начертаниями шрифта

4. Выбираете стиль. Напротив подходящего есть значок +. Кликаете на него

-3

5. Кликаете на кнопку просмотра(если вы добавили новый стиль шрифта, то появится красная точка в верхнем левом углу кнопки)

-4

6. Будем подключать стиль, используя директиву @import. Поэтому переключитесь на @import.

-5

7. Копируете все кроме тегов <style></style>

-6

8. Вставляете скопированный import в файл css

-7

9. Копируете правило, которое нужно подключить к тексту, чтобы шрифт применился

-8

10. Подключаем правило. Можно подключить к тексту, а можно и к родительскому контейнеру, шрифты наследуются.

Скрин из IDE
Скрин из IDE
Результат
Результат

Спасибо, что дочитали до конца. Вы меня очень поддержите, если поставите "Лайк", оставите комментарий или ПОДПИШИТЕСЬ на мой канал :)

#веб #шрифты #html #css