Как правильно пользоваться шрифтами от гугла?

Question

[Матвей Томилов]

Объясните подробно как пользоваться этим ресурсом https://fonts.google.com/.

Я вставляю этот кусок в head

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Потом к шрифту в ксс пишу это
font-family: 'Roboto', sans-serif;
Это понятно из описания, а как например добавить стили?
Bold
Bold Italic
Black
Black Italic

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

Answer 1

[Михаил]

Таким способом вы подключите только regular шрифт. На сайте google fonts при добавлении шрифта, есть ещё пункт customize где вы можите настроить начертания и т.д.
Вот пример:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext" rel="stylesheet">

В CSS используйте font-weight и font-style

font-family: 'Roboto', sans-serif;
font-weight: bold;
font-style: italic;

и т.д.

Comments

[Матвей Томилов]

Спасибо

Answer 2

[Дима Паутов]

Просто указываете начертание.

body {
font-family: 'Roboto', sans-serif;
}

.class {
font-weight: bold;
font-style: italic;
}

.class2 {
font-weight: 300;
}

и т.д

Answer 3

[Сергей Тутуков]

1.
2.

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700i" rel="stylesheet">

3. https://fonts.googleapis.com/css?family=Roboto:400...

Пример:
Roboto 700 bold italic

font-family: 'Roboto';
font-style: italic;
font-weight: 700;