Быстрое подключение шрифтов Google Fonts (Open Sans, Roboto, Ubuntu, Montserrat, Cuprum)
Добавлю для себя быстрое подключение шрифтов Google (Open Sans, Roboto, Ubuntu, Montserrat, Cuprum), просто потому что надоело постоянно брать их с сайта fonts.google.com. Если кому-то пригодится, то берите, мне не жалко.
Google font Open Sans
//Добавляем к body или к нужному элементу
font-family: 'Open Sans', sans-serif;
//Добавляем в <head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<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 rel="preconnect" href="https://fonts.gstatic.com">
<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 rel="preconnect" href="https://fonts.gstatic.com">
<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 rel="preconnect" href="https://fonts.gstatic.com">
<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 rel="preconnect" href="https://fonts.gstatic.com">
<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 rel="preconnect" href="https://fonts.gstatic.com">
<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');
Например, нам нужно к кнопке добавить класс fancybox-inline, чтобы кнопка вызывала форму в поп-ап окне….
В этой статье мы создадим офф-скрин меню с помощью CSS переходов. Изначально меню будут скрыты…
Чтобы любое видео подстраивалось под размеры окна браузера, добавим пару правил в CSS и один…
Больше текста напишу позже, а пока: добавьте в файл скриптов: Добавьте в файл стилей: Таблица…
1 комментарий
Ответить
Вообще огонь! Спасибо, админ! ;0)