Откройте https://fonts.google.com/, подберите подходящий шрифт и нажмите кнопку со значком "+" — Select this font
В нижней части экрана появится всплывающий блок Family Selected
Щелкните по нему и перейдите на вкладку Customize
Выберите очертания и язык. Для использования русского языка нужно отметить Cyrillic (кириллица).
Затем вернитесь на вкладку EMBED.
Подключаем Google шрифты на сайт
1. Первый вариант подключения Google шрифтов на страницу
Там на вкладке STANDARD указана ссылка, которая вставляется в код страницы html, в сектор <head>
Например:
<head> … <link href="https://fonts.googleapis.com/css?family=Roboto&subset=cyrillic" rel="stylesheet"> … </head>
2. Второй вариант подключения Google шрифтов на страницу
На вкладке @IMPORT указана ссылка, которую необходимо вставить в каскадный лист стилей. Обычно он называется style.css. Прописывается это код в начале файла стилей. Буквально в первых строчках.
Например:
@import url('https://fonts.googleapis.com/css?family=Roboto&subset=cyrillic');
3. Третий вариант подключения Google шрифтов на страницу
И, наконец, последний третий вариант указания шрифта — это указание опять же в блоке <head>, но обернутого в тегах <style>.
Например:
<head>
…
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto&subset=cyrillic');
</style>
…
</head>
Теперь рассмотрим как же использовать Google шрифты уже подключённые непосредственно для классов, в целом для страниц, заголовков и т. д.
На вкладке EMBED в разделе Specify in CSS даётся пример использования шрифтов в стилях:
font-family: 'Roboto', sans-serif;
Примеры:
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
}
.class-style {
font-family: 'Roboto', sans-serif;
}
<h1 style="font-family: 'Roboto', sans-serif;">Заголовок первого уровня</h1>
СВами
