Позвоните нам
8 800 555-23-46
звонок по Роcсии бесплатный
+7 (495) 580 30 45 Москва
+7 (8442) 78 18 90 Волгоград
+ 7 (917) 338 51 54
Все контакты и офисы
Напишите нам: info@onvolga.ru

Спросить онлайн

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

Подключить любой шрифт для Вашего сайта довольно просто и быстро.

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

После этого, находим файл стилей (например, style.css), или создаём новый, и добавляем в документ следующий код:

@font-face {
font-family: test; /*вместо test пишем название нашего шрифта*/
src: url(fonts/test.ttf); /*внутри скобок прописываем путь к файлу шрифта*/}

Далее, нам необходимо подключить файл стиля, в котором прописан код подключения нового шрифта, к нашему сайту. Для того, чтобы это сделать, необходимо в файле index.php в теге <head> написать следующий код:

<link rel="stylesheet" href="/style.css">

При этом, в значении атрибута href необходимо написать путь к нашему файлу стилей, в котором у нас уже подключён наш шрифт.

Вот и всё! Теперь мы можем его использовать.

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

Пример подключения шрифта Open Sans для системы управления контентом Joomla!

  1. Находим шрифт через поисковик и скачиваем его.
  2. В корневой папке сайта на Joomla ищем папку templates, переходим в папку с активным шаблоном.
  3. Ищем в в директории с шаблоном файл style.css (он может находится в папке css), открываем его.
  4. Переходим в конец документа и пишем туда следующий код: @font-face { font-family: Open Sans; src: fonts/OpenSans.ttf[название файла] }
  5. Переходим в папку fonts в папке активного шаблона.
  6. Скидываем туда файл скачанного шрифта. [Если файл style.css ещё не подключен к сайту]
  7. Ищем файл index.php (или head.php, или header.php, или template.php и т.д. в зависимости от выбранного шаблона) и между открывающим и закрывающим тегом head пишем следующий код:

Подключение шрифта Open Sans для системы управления контентом Joomla

Пример использования шрифта в файле style.css:

h1 {
font-family: “Open Sans”;
}

Пример подключения шрифта Open Sans для системы управления контентом Wordpress

Алгоритм абсолютно такой же, за исключением директорий: файл стиля находится в папке <адрес_сайта>/wp_content/themes/<активная_тема>/css/style.css

Папка с шрифтами у сайта на Wordpress находится по адресу <адрес_сайта>/wp_content/themes/<активная_тема>/fonts/

Файл header.php, куда вписывается код подключения файлов стилей, находится в директории <адрес_сайта>/wp_content/themes/<активная_тема>/

Подключение шрифта Open Sans для системы управления контентом Wordpress

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

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

Переходим на сайт fonts.google.com, ищем там требуемый шрифт и открываем страницу с ним. В правом верхнем углу находится кнопка «Select this font», при нажатии на которую появится окно с кодом тега <link>, который просто нужно добавить в файл header.php. После этого шрифт уже можно использовать.

Рассмотрим пример подобного подключения для системы 1С-Битрикс.

На сайте шрифтов гугла есть интересный шрифт Roboto (fonts.google.com/specimen/Roboto). После нажатия кнопки появился следующий код:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Подключение Google шрифта на сайт 1С-Битрикс

Открываем корневую папку сайта, переходим по пути bitrix/templates/<мой_шаблон>/header.php и внутри тега <head> вставляем код выше. Вот и всё, новый шрифт подключен!

Well done!

 Ваш запрос или вопрос по теме:

Интернет-агентство сегодня:

ТОП20 веб-студий России по разработке интернет-магазинов по доступной цене в рейтинге CMSMagazine, 1 место в ЮФО и ТОП10 Центрального ФО.

ТОП100 веб-студий Партнеров Битрикса по созданию интернет-магазинов и 11 место среди разработчиков интернет-магазинов на Битриксе по низким ценам в рейтинге РейтингРунета-2016.

ТОП10 разработчиков интернет-магазинов Москвы по доступной цене в рейтинге РейтингРунета.

ТОП120 SEO-компаний России, специализирующихся на поисковом продвижении интернет-магазинов по версии РейтингРунета.

Золотой Сертифицированный Партнер 1С-Битрикс.

Государственная аккредитация в области информационных технологий (№5291 Министерства связи РФ).

ПОЛУЧИТЕ БЕСПЛАТНУЮ КОНСУЛЬТАЦИЮ или ОТПРАВЬТЕ ЗАПРОС

Задайте вопрос о веб-разработке, обслуживании или продвижении сайта или отправьте запрос по работам. Мы стараемся отвечать на Ваши запросы в течение 24 часов.