Быстрое подключение шрифтов 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');
Добавить класс к элементу с помощью js

Например, нам нужно к кнопке добавить класс fancybox-inline, чтобы кнопка вызывала форму в поп-ап окне….

Создание офф-скрин меню с помощью CSS переходов

В этой статье мы создадим офф-скрин меню с помощью CSS переходов. Изначально меню будут скрыты…

Как сделать видео с youtube адаптивным на вашем сайте

Чтобы любое видео подстраивалось под размеры окна браузера, добавим пару правил в CSS и один…

Что сделать с таблицами, чтобы их можно было нормально просматривать на смартфонах?

Больше текста напишу позже, а пока: добавьте в файл скриптов: Добавьте в файл стилей: Таблица…

1 комментарий

Андрей

Вообще огонь! Спасибо, админ! ;0)

Ответить