Не пропусти
Главная » Для вас » Как правильно подключить шрифты в CSS на сайте?

Как правильно подключить шрифты в CSS на сайте?

Всем привет дорогие друзья! Наконец то к сайту вернулась посещаемость, а то с праздниками народ вообще подзабил на полезные статьи. Ну это понятно, кто в праздники будет что-то читать.

Сегодня для вас подготовил хорошую статью с видео уроком о том, как подключить любые шрифты, в том числе и Google, через css к html сайту.

Давайте разберемся на практике.

Подбираем нужный шрифт

В начале вам нужно будет выбрать понравившийся шрифт. Свое внимание я остановил на Roboto Condensed. Он красивый и стильный, настоящий коммерческий шрифт. Скачать вы можете его прямо здесь (вирусов нет, безопасно).

Как правильно подключить шрифты в CSS на сайте?

Фишка его еще и в том, что он есть и кириллический и также отлично отображается в браузерах.

Отлично! Пол дела сделано. Теперь переходим к следующему шагу.

Создаем папку для шрифтов

Теперь нам нужно создать папку куда мы его поместим. В идеале лучше создать так как есть, т.е «Fonts». Это общепринято и очень удобно. Точно не запутаетесь Как правильно подключить шрифты в CSS на сайте?

Как правильно подключить шрифты в CSS на сайте?

Файл кидаете без изменений, т.е у вас он в этой папке должен быть следующего вида –

roboto.ttf

Подключаем шрифт через CSS

Теперь идем в таблицу стилей CSS нашего сайта на html и в самом верху пишем следующее правило для подключения шрифтов:

@font-face {
font-family: Roboto Condensed;
src: url(../fonts/Roboto.ttf);
}

Путь относительный и выглядит имено так 

url(../fonts/Roboto.ttf);

font-family: 'Open Sans', sans-serif;

  — это сообщение браузеру, что будут подключаться сторонние шрифты на сайте.

Теперь чтобы применить стиль шрифта к всему тексту (параграфы, заголовки, ссылки, списки и т.д) мы сделаем одну маленькую хитрость. Ведь вы все знаете, что в CSS используется правило наследование, т.е родительский тег распространяет свое влияние на все дочерние элементы. Этим мы и воспользуемся и я объясню почему.

Во-первых, мы пропишем в css правило только один раз и оно будет распространяться автоматически на все другие элементы и классы от родителя к «дочкам».

Во-вторых, мы значительно упрощаем нашу таблицу, делая ее легкой, а если ваш сайт загружается быстро, то это безусловный плюс в карму и вы будете выше в поиске при одинаково полезном контенте и правильной оптимизации.

Теперь как нам это сделать? Все просто. Мы знаем, что самый главный тег в веб структуре это 


  и


 .

Вот к ним то мы и применим наше правило следующим образом:

html,body{
width:100%;
margin:0;
padding:0;
font-family:'Roboto Condensed', sans-serif;
}

Мы просто задали семейство шрифтов вот такой строчкой 

font-family:'Roboto Condensed', sans-serif;

Теперь мы можем спать спокойно Как правильно подключить шрифты в CSS на сайте? Все что нам в дальнейшем потребуется это только для каждого элемента подбирать нужный размер шрифта через

font-size

 .

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

Здесь все еще проще. Мы заходим на [urlspan]эту[/urlspan] страницу и выбираем нужный вам шрифт, например, нам понравился кириллический Open Sans.

Как правильно подключить шрифты в CSS на сайте?

Мы идем и нажимаем на иконку быстрое добавление или использование. Вот на скриншоте показано:

Как правильно подключить шрифты в CSS на сайте?

Нажав сюда, мы увидим следующую картину:

Как правильно подключить шрифты в CSS на сайте?

Т. Е мы можем выбрать еще и в каких начертаниях он будет, а справа мы видим скорость загрузки. Здесь есть одно важное примечание: Не вводите все галочки!

Потому как это замедляет в целом работу вашего сайта. Достаточно выбрать только нормальное его использование, т. е по умолчанию галочка на Normal 400 и все! Если вы будете последовательно все включать, то значок Page Load будет увеличиваться и приближаться к красной отметке. Оно вам надо! Вы же хотите, чтобы все быстро открывалось или как?

Следующим шагом мы скроллим ниже и видим вот такую область:

Как правильно подключить шрифты в CSS на сайте?

Это код, который вам нужно вставить между служебными тегами



Его я подключаю в следующем месте:

Как правильно подключить шрифты в CSS на сайте?

Далее все по отработанной схеме. В главный родительский тег либо 

  либо 

html

  прописываете вот эту строчку:

body

И не нужно теперь ничего подключать через такую запись

font-family: 'Open Sans', sans-serif;

На этом все дорогие читатели. Вроде попытался разжевать все подробно. Это самый простой, популярный и работоспособный способ, есть также другие фишки, но они, на мой взгляд, усложнят для вас задачу. Предлагаю вашему вниманию авторские видео уроки. Не забывайте нажать на кнопки социальных сетей, чтобы увидеть их. Всем спасибо до следующих встреч.

О admin

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

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*

x

Check Also

10+ фото гениального косплеера, способного стать кем угодно

Капитан Джек Воробей Эдвард Руки-ножницы Лилу из 5 Элемента Вампир Лестат из фильма Интервью с вампиром Женщина-титан из Атаки на Титан Гаара из Наруто

Рейтинг@Mail.ru