Меню Рубрики

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

У вас есть свой сайт, вам надоел или не подходит под дизайн, шрифт на сайте, и вы не знаете, как поменять шрифт в Html? Тогда эта статья должна вам помочь.

У меня тоже возникла такая необходимость, захотелось поменять шрифт WordPress, Arial на более интересный. Причем, хотелось сделать разные шрифты, как для боковой колонки, так и для основного текста. Решение было найдено.

Для начала составим небольшой план:

1. Выбрать шрифт.

2. Подключить шрифт.

3. Изменить шрифт.

Давайте начнем с самого начала.

1. Выбрать шрифт.

Определимся со шрифтом. Предпочитаю пользоваться сайтом webfont.ru. Здесь можете выбрать понравившийся шрифт к себе на сайт. На моем сайте используются шрифты Roboto, Roboto Condensed. Чуть позже я покажу, как узнать какие шрифты используются на сайте.

2. Подключение шрифтов.

После того, как выбрали более препочтительный вариант, нужно подключить шрифт к себе на сайт. Чтобы установить шрифты на сайт, необходимо открыть в корне вашего сайта, файл Style.css. И в самом вверху прописать код

@import "http://webfonts.ru/import/roboto.css";

где roboto — название шрифта, который вы выбрали.
Эта строчка означает, что данный шрифт будет загружаться у посетителей вашего сайта автоматически.

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

3. Изменение шрифта.

Нужно заменить стандартный шрифт на новый. Если вы хотите изменить шрифт основного контента, статей, то придется внести изменения в файл стилей. Откройте файл Style.css и найдите строчку с элементом

body {}

Как изменить шрифт на сайте

В строчке font-family: следует написать название нового шрифта.

Сохраните файл, теперь на вашем сайте шрифт контента поменяется.

Если хотите изменить шрифт в боковой колонке, то следует узнать, к какому классу принадлежит сайдбар. Для этого на своем сайте, наведите на любое слово в боковой колонке и нажмите правую кнопку мыши, выберите Исследовать элемент.
как изменить шрифт на сайте

Откроется окошко, в котором нужно найти класс. В нашем случае, это .widget li. Проверяем, правильно ли мы определили класс. Прописываем элемент font-family: robotocondensed;
если шрифт в боковой колонке изменился, то мы правильно определили класс. Смотрим чуть правее на цифры style.css:755. Это означает, что данный элемент находится в файле Style.css на 755 строчке. Открываем файл Style.css и проверяем.

Как изменить шрифт на сайтеНаходим наш класс .widget li и добавляем строчку

font-family: robotocondensed;

Сохраните файл, теперь в боковой колонке шрифт также должен поменяться.

Как узнать, какие шрифты используются на сайте.

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

Image 12Здесь вы увидеть шрифты используемые на сайтах.

Если возникли вопросы, можете написать в комментариях.

[Всего голосов: 1    Средний: 5/5]

Комментарии:

5 комментариев на «“Как подключить шрифт на сайте”»

  1. Здравствуйте, Азат! У меня вопрос. Чтобы узнать какой шрифт используется на сайте, навожу указатель мыши на слово, жму правую кнопку мыши и… не вижу «Исследовать элемент» у мня что браузере хроме, что в браузере яндекса показывает «просмотр кода элемента». А там нет шрифтов. Что делать?

  2. Здравствуйте, Азат!
    А как изменить шрифт в названии сайта? И как сделать так, чтобы посетители видели это название в любом браузере?
    С уважением и надеждой на помощь, Ольга Карасёва

Добавить комментарий для Vera Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2017 Онлайн журнал - Blognovichok.ru· Авторские права защищены.
Все материалы опубликованные на сайте являются объектами авторского права. Использование материалов разрешается только с активной ссылкой на blognovichok.ru