Быстрое подключение шрифтов Google Fonts (Open Sans, Roboto, Ubuntu, Montserrat, Cuprum)

13.11.2016

Добавлю для себя быстрое подключение шрифтов Google (Open Sans, Roboto, Ubuntu, Montserrat, Cuprum), просто потому что надоело постоянно брать их с сайта fonts.google.com. Если кому-то пригодится, то берите, мне не жалко.

Google font Open Sans

//Добавляем к body или к нужному элементу
font-family: 'Open Sans', sans-serif;
 
//Добавляем в <head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet"> 
 
//Или добавляем в самый верх файла стилей css
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

Ссылка – https://fonts.google.com/specimen/Open+Sans

Google font Roboto

//Добавляем к body или к нужному элементу
font-family: 'Roboto', sans-serif;
 
//Добавляем в <head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
 
//Или добавляем в самый верх файла стилей css
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Ссылка – https://fonts.google.com/specimen/Roboto

Google font Ubuntu

//Добавляем к body или к нужному элементу
font-family: 'Ubuntu', sans-serif;
 
//Добавляем в <head>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap" rel="stylesheet">
 
//Или добавляем в самый верх файла стилей css
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');

Ссылка – https://fonts.google.com/specimen/Ubuntu

Google font Montserrat

//Добавляем к body или к нужному элементу
font-family: 'Montserrat', sans-serif;
 
//Добавляем в <head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
 
//Или добавляем в самый верх файла стилей css
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

Ссылка – https://fonts.google.com/specimen/Montserrat

Google font Cuprum

//Добавляем к body или к нужному элементу
font-family: 'Cuprum', sans-serif;
 
//Добавляем в <head>
<link href="https://fonts.googleapis.com/css2?family=Cuprum:wght@400;700&display=swap" rel="stylesheet"> 
 
//Или добавляем в самый верх файла стилей css
@import url('https://fonts.googleapis.com/css2?family=Cuprum:wght@400;700&display=swap');

Ссылка – https://fonts.google.com/specimen/Cuprum

Подключить несколько шрифтов можно так:

//Добавляем к body или к нужному элементу
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif;
 
//Добавляем в <head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto:ital,wght@0,700;1,300&display=swap" rel="stylesheet"> 
 
//Или добавляем в самый верх файла стилей css
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto:ital,wght@0,700;1,300&display=swap');

Полезная инфа:

Оставить комментарий