В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-03-2024! 🞨
Меню :
fonts (26)
css (131)



Blog (1392)
php (329)
js (244)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (29)
Показать еще :
fonts (26)
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
hosting (18)
svg (18)
input (18)
php date (17)
board (16)
php time (16)
html book (16)
color (15)
info (15)
img (14)
js time (14)
js url (14)
js events (14)
htaccess (13)
select (13)
notepad (13)
osclass (13)
keyboard (12)
знак (12)
dw block (12)
php img (12)
php path (12)
table (12)
download (12)
icon (11)
form (11)
jsphp (11)
alphabet (10)
keyframes (10)
js delete (10)
yandex (10)
mouse (10)
chart (9)
hover (9)
dosite (8)
browser (8)
php post (7)
comment (7)
php url (7)
iframe (6)
php get (6)
mysql (6)
click (6)
list (6)
canvas (6)
adminka (6)
vs code (6)
js id (5)
mb (5)
heading (5)
value (5)
reg.ru (5)
ftp (5)
year (5)
js math (5)
tag a (5)
bbcode (4)
php var (4)
base64 (4)
xml (4)
scandir (4)
games (4)
flags (4)
symbols (4)
week (4)
day (4)
ssl (4)
нок (4)
submit (4)
task (4)
vk (4)
month (4)
pages (4)
console (4)
js form (4)
domen (3)
line (3)
https (3)
js post (3)
jquery post (3)
money (3)
numbers (3)
js img (3)
padding (3)
куб (3)
captcha (3)
ucoz (3)
js hash (3)
tag hr (2)
details (2)
typeof (2)
seo (2)
prompt (2)
sitemap (2)
рся (2)
youtube (2)
height (2)
arrows (2)
js vars (2)
counter (2)
google (2)
qr kod (2)
video (2)
speed (1)
smile (1)
нод (1)
rutube (1)
scroll (1)
windows (1)
archive (1)
jino (1)
cursor (1)

Google шрифты подключить

Google fonts или как подключить Google шрифты на сайте, на странице, с примерами.

Подробно о подключении Google fonts

  1. Подключение Google fonts - №1
  2. Подключение Google fonts - №2
  3. Подключение Google fonts - №3

  1. Подключение Google fonts - №1

    Чтобы подключить Google fonts/Google шрифты - нам нужен пример и на его основе и рассмотрим, как же подключать шрифты от Google, всего есть несколько способов!

    Рассмотрим первый вариант:

    Для этого нам понадобится сайт, с Google fonts:

    После того, как вы нашли подходящий шрифт Google, справа от шрифта ищем - "Select this style" - "выбрать этот стиль" - справа должно показаться окно с параметрами данного шрифта Google

    Нам нужна та часть, где где "link" - и часть, которая касается выбранного стиля: "Hachi Maru Pop"

    <link href="https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap" rel="stylesheet">

    Также справа копируем font-family

    font-family: "Hachi Maru Pop", cursive;
    Нажмите, чтобы открыть в новом окне.
    Подключение Google fonts - №1

    Нам нужен какой-то блок, пусть это будет div с текстом внутри.

    Ему присвоим какой-то класс - "thenew"

    <div class="thenew">A a, B b, C c, D d, E e, F f, G g, H h, I i, J j, K k, L l, M m, N n, O o, P p, Q q, R r, S s, T t, U u, V v, W w, X x, Y y, Z z<br>1 2 3 4 5 6 7 8 9 0</div>
    Соберем выше приведенный код вместе:

    <link href="https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap" rel="stylesheet">

    <style>

    .thenew{

    font-family: "Hachi Maru Pop", cursive;

    width: 90%;

    height: 240px;

    text-align: center;

    font-size: 23px;

    color: white;

    background: red;

    line-height: 61px;

    margin: 10px 0;

    padding: 5%;

    }

    </style>

    <div class="new">A a, B b, C c, D d, E e, F f, G g, H h, I i, J j, K k, L l, M m, N n, O o, P p, Q q, R r, S s, T t, U u, V v, W w, X x, Y y, Z z<br>1 2 3 4 5 6 7 8 9 0</div>

    Результат подключения Google fonts на сайте

    A a, B b, C c, D d, E e, F f, G g, H h, I i, J j, K k, L l, M m, N n, O o, P p, Q q, R r, S s, T t, U u, V v, W w, X x, Y y, Z z
    1 2 3 4 5 6 7 8 9 0

  2. Подключение google fonts - №2

    Второй способ подключить google fonts это - @import. Чтобы продемонстрировать подключение Google шрифтов возьмем другой шрифт.

    Для этого нам понадобится - открываем сайт Google fonts. Выбираем шрифт Google, который будем подключать.

    Теперь выбираем @import:

    <style>
    @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
    </style>

    Второй элемент

    font-family: 'Lobster', cursive;

    Далее нам понадобится какой-то класс в блоке:

    <div class="newclass">A a, B b, C c, D d, E e, F f, G g, H h, I i, J j, K k, L l, M m, N n, O o, P p, Q q, R r, S s, T t, U u, V v, W w, X x, Y y, Z z<br>1 2 3 4 5 6 7 8 9 0</div>

    + стили...

    Соберем весь код подключения шрифтов Google

    <style>
    @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

    .newclass{

    font-family: 'Lobster', cursive;

    width: 90%;

    height: 240px;

    text-align: center;

    font-size: 23px;

    color: white;

    background: red;

    line-height: 61px;

    margin: 10px 0;

    padding: 5%;

    }

    </style>

    <div class="newclass">A a, B b, C c, D d, E e, F f, G g, H h, I i, J j, K k, L l, M m, N n, O o, P p, Q q, R r, S s, T t, U u, V v, W w, X x, Y y, Z z<br>1 2 3 4 5 6 7 8 9 0</div>

    Результат подключения Google fonts на сайте

    A a, B b, C c, D d, E e, F f, G g, H h, I i, J j, K k, L l, M m, N n, O o, P p, Q q, R r, S s, T t, U u, V v, W w, X x, Y y, Z z
    1 2 3 4 5 6 7 8 9 0

  3. Подключение Google fonts - №3

    Еще один из способов подключить Google fonts - скачать Google fonts и загрузить на сайт.

    После того, как зашли на Google шрифты - ищем кнопку - "Download family"

    Подключение Google fonts - №3

    Открываем скачанный архив с Google fonts, ищем файл с разрешением шрифтов, в примере - ".ttf"

    Подключение Google fonts - №3

    Подключаем шрифт + добавляем стили с классом

    <style>
    @font-face{font-family: sacramento-regular; src: url(//dwweb.ru/__a-data/__all_for_scripts/__fonts/sacramento-regular.ttf); }
    .example_2{
    font-family: "sacramento-regular", cursive;
    width: 90%;
    height: 240px;
    text-align: center;
    font-size: 35px;
    color: white;
    background: red;
    line-height: 61px;
    margin: 10px 0;
    padding: 5%;
    }
    </style>

    В div располагаем класс и текст:

    <div class="example_2">A a, B b, C c, D d, E e, F f, G g, H h, I i, J j, K k, L l, M m, N n, O o, P p, Q q, R r, S s, T t, U u, V v, W w, X x, Y y, Z z<br>1 2 3 4 5 6 7 8 9 0</div>

    Результат подключения Google fonts на сайте

    A a, B b, C c, D d, E e, F f, G g, H h, I i, J j, K k, L l, M m, N n, O o, P p, Q q, R r, S s, T t, U u, V v, W w, X x, Y y, Z z
    1 2 3 4 5 6 7 8 9 0
Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.018507 секунд. Подробнее