58 подписчиков

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

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

Итак,...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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