Найти на сайте
  2. Форумы
  3. МАСТЕРСКАЯ
  4. HTML / CSS / PHP / JS / RegExp
  5. Смена шрифтов

Смена шрифтов

#1 13 апреля 2014 в 21:56
Подскажите как и где меняются шрифты в заголовках и в текстах?
В каких именно файлах нужно поменять это.

Наверное многие в таком вопросе нуждаются.
0
#2 13 апреля 2014 в 23:52
Erwin, большей частью хранится все в файлах стилей css вашего шаблона, что-то в шаблоне .tpl может быть прописано.
Почитайте о CSS и разметке HTML, хотябы представление чтобы было.

К примеру в хроме можно нажать на элементе правой кнопкой и выбрать "Просмотр кода элемента". Покажет разметку по центру и стили с боку, там же будет название файла где хранятся соответствующие стили…
Просто так...
0
#3 14 апреля 2014 в 03:15
Скачайте FireBug для вашего браузера или стрекозу и будет вам счастье))))
Люблю эту CMS! Я немного художествую тут: http://virelart.ru :) Пока по большей части выкладываюсь тут vk.com/virelart. p.s.: пасибки можно в карму :3
0
#4 14 апреля 2014 в 11:21

Подскажите как и где меняются шрифты в заголовках и в текстах?

Erwin
шаблон/css/text.css основные настройки шрифтов и размеров текстов там
+1
#5 15 ноября 2016 в 19:02
Чтобы не создавать новую ветку спрошу здесь. Подскажите где на 2.5.1 полностью сменить шрифт в статьях на нужный мне? Если не сложно то по порядку действий пожалуйста) потому как далек от верстки и тд. К примеру хочу чтобы в статьях (именно в статьях нужного мне типа контента, например posts) везде сменился шрифт на нужный мне и чтобы дальше использовался только он при добавлении. Подскажите люди добрые пожалуйста.
0
#6 15 ноября 2016 в 19:15
zeozao, в css что то понимаете?
0
#7 15 ноября 2016 в 19:33
zeozao, ищите в css Вашего шаблона font-family — там и указан Ваш текущий шрифт. Там же Вы можете прописать свой. В дефолтном шаблоне шрифт для всего сайта указан в файле theme-text.css. 

  1. font-family: 'Trebuchet MS', Helvetica, 'DejaVu Sans', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif;
Вот здесь и нужно менять. Если Вы хотите подключить шрифт Google, то нужно будет еще дополнительный код написать — при выборе шрифта у Гугла есть описание, как это сделать.

Или скажите здесь, какой шрифт Вы хотите подключить к сайту, в каких местах — в теле, сайдбаре, заголовках. Чтобы получить максимальную помощь, нужно максимально описать проблему.
t.me/googleindexingapi
0
#8 20 июня 2018 в 11:38


zeozao, ищите в css Вашего шаблона font-family — там и указан Ваш текущий шрифт. Там же Вы можете прописать свой. В дефолтном шаблоне шрифт для всего сайта указан в файле theme-text.css. 

  1. font-family: 'Trebuchet MS', Helvetica, 'DejaVu Sans', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif;
Вот здесь и нужно менять. Если Вы хотите подключить шрифт Google, то нужно будет еще дополнительный код написать — при выборе шрифта у Гугла есть описание, как это сделать.

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

шэльдэ бердэ бельдэ

например, если я хочу подключить этот шрифт от гугла (https://fonts.google.com/specimen/Rubik) куда и что мне прописать, подскажите пожалуйста. Чтобы он приминился как для заголовков, в теле и сайдбаре, ко всему сайту в общем. как это реализовать?
Мой список самых прибыльных сервисов монетизации: 1) Монетизация Push трафика! , 2) Тизерная реклама. Максимальный доход плюсом к контекстной рекламе.
0
#9 20 июня 2018 в 13:15

куда и что

@kami
В файл main.tpl.php перед </head> добавить
  1. <link href="https://fonts.googleapis.com/css?family=Rubik&subset=cyrillic" rel="stylesheet">
Посмотреть, какой в этом же файле в самый последний подключенный файл css, открыть его и в самом низу добавить
  1. *{
  2.      font-family: 'Rubik', sans-serif;
  3. }
t.me/googleindexingapi
0
#10 20 июня 2018 в 13:28


куда и что

@kami
В файл main.tpl.php перед добавить
Посмотреть, какой в этом же файле в самый последний подключенный файл css, открыть его и в самом низу добавить
  1. *{
  2.      font-family: 'Rubik', sans-serif;
  3. }

шэльдэ бердэ бельдэ

Огромное спасибо!!!
Мой список самых прибыльных сервисов монетизации: 1) Монетизация Push трафика! , 2) Тизерная реклама. Максимальный доход плюсом к контекстной рекламе.
0
#11 21 мая 2021 в 19:54
Есть в наличии шрифт PF Beau Sans Pro, фирма использует в своей работе, и надо его поставить на сайт.
Можно поставить гугловский шрифт PF Beau Sans, но он платный и без русского, да и зачем платить когда есть свой.
Как поставить свой шрифт на сайт? Инстант 2.14.1
По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей
0
#12 22 мая 2021 в 07:46


Как поставить свой шрифт на сайт? Инстант 2.14.1

vikont
Также как и в другой cms. Подготовить файл шрифта для разных браузеров, и подключить в стилях через font-face htmlbook.ru/blog/svoi-shrift-na-stranitse
Разработка виджетов, полей и компонентов, сайты под ключ. site: www.zau4man.ru telegram: @zau4man консультации: 300р./час
0
#13 22 мая 2021 в 16:50
Спасибо, хорошая статья! Разжевано довольно подробно. Но надо пробовать. Потом отпишусь как получилось реализовать.
По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей
0
#14 23 мая 2021 в 19:13
Как и обещал, подробности
1. И самое главное, надо скачать нужный web шрифт, а не любой с тем же названием
2. Создать папку fonts в папке css вашего шаблона, в нашем случае это modern — /templates/modern/css/fonts/
3. Скопировать туда все шрифты. В моем случае в комплекте оказались по 4-ре файла на каждый шрифт- для разных браузеров и ситуаций. Все их и подключил.
4. В файле /templates/modern/scss/theme/_custom.scss прописать код подключения шрифтов
  1. @font-face {
  2. font-family: 'PF BeauSans Pro';
  3. src: url('/templates/modern/css/fonts/PFBeauSansPro-BoldItalic.eot');
  4. src: local('PFBeauSansPro-BoldItalic'),
  5. url('/templates/modern/css/fonts/PFBeauSansPro-BoldItalic.eot?#iefix') format('embedded-opentype'),
  6. url('/templates/modern/css/fonts/PFBeauSansPro-BoldItalic.woff2') format('woff2'),
  7. url('/templates/modern/css/fonts/PFBeauSansPro-BoldItalic.woff') format('woff'),
  8. url('/templates/modern/css/fonts/PFBeauSansPro-BoldItalic.ttf') format('truetype');
  9. font-weight: bold;
  10. font-style: italic;
  11. }
Если шрифтов много, повторить код столько раз, сколько шрифтов.
Например так
@font-face {
font-family: 'PF BeauSans Pro';
src: url('/templates/modern/css/fonts/PFBeauSansPro-BoldItalic.eot');
src: local('PFBeauSansPro-BoldItalic'),
url('/templates/modern/css/fonts/PFBeauSansPro-BoldItalic.eot?#iefix') format('embedded-opentype'),
url('/templates/modern/css/fonts/PFBeauSansPro-BoldItalic.woff2') format('woff2'),
url('/templates/modern/css/fonts/PFBeauSansPro-BoldItalic.woff') format('woff'),
url('/templates/modern/css/fonts/PFBeauSansPro-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}

@font-face {
font-family: 'PF BeauSans Pro';
src: url('/templates/modern/css/fonts/PFBeauSansPro-Black.eot');
src: local('PFBeauSansPro-Black'),
url('/templates/modern/css/fonts/PFBeauSansPro-Black.eot?#iefix') format('embedded-opentype'),
url('/templates/modern/css/fonts/PFBeauSansPro-Black.woff2') format('woff2'),
url('/templates/modern/css/fonts/PFBeauSansPro-Black.woff') format('woff'),
url('/templates/modern/css/fonts/PFBeauSansPro-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}

@font-face {
font-family: 'PF BeauSans Pro';
src: url('/templates/modern/css/fonts/PFBeauSansPro-Light.eot');
src: local('PFBeauSansPro-Light'),
url('/templates/modern/css/fonts/PFBeauSansPro-Light.eot?#iefix') format('embedded-opentype'),
url('/templates/modern/css/fonts/PFBeauSansPro-Light.woff2') format('woff2'),
url('/templates/modern/css/fonts/PFBeauSansPro-Light.woff') format('woff'),
url('/templates/modern/css/fonts/PFBeauSansPro-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: 'PF BeauSans Pro Bbook';
src: url('/templates/modern/css/fonts/PFBeauSansPro-Bbook.eot');
src: local('PFBeauSansPro-Bbook'),
url('/templates/modern/css/fonts/PFBeauSansPro-Bbook.eot?#iefix') format('embedded-opentype'),
url('/templates/modern/css/fonts/PFBeauSansPro-Bbook.woff2') format('woff2'),
url('/templates/modern/css/fonts/PFBeauSansPro-Bbook.woff') format('woff'),
url('/templates/modern/css/fonts/PFBeauSansPro-Bbook.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'PF BeauSans Pro';
src: url('/templates/modern/css/fonts/PFBeauSansPro-ThinItalic.eot');
src: local('PFBeauSansPro-ThinItalic'),
url('/templates/modern/css/fonts/PFBeauSansPro-ThinItalic.eot?#iefix') format('embedded-opentype'),
url('/templates/modern/css/fonts/PFBeauSansPro-ThinItalic.woff2') format('woff2'),
url('/templates/modern/css/fonts/PFBeauSansPro-ThinItalic.woff') format('woff'),
url('/templates/modern/css/fonts/PFBeauSansPro-ThinItalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}

@font-face {
font-family: 'PF BeauSans Pro XThin';
src: url('/templates/modern/css/fonts/PFBeauSansPro-XThinItalic.eot');
src: local('PFBeauSansPro-XThinItalic'),
url('/templates/modern/css/fonts/PFBeauSansPro-XThinItalic.eot?#iefix') format('embedded-opentype'),
url('/templates/modern/css/fonts/PFBeauSansPro-XThinItalic.woff2') format('woff2'),
url('/templates/modern/css/fonts/PFBeauSansPro-XThinItalic.woff') format('woff'),
url('/templates/modern/css/fonts/PFBeauSansPro-XThinItalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}

@font-face {
font-family: 'PF BeauSans Pro';
src: url('/templates/modern/css/fonts/PFBeauSansPro-Thin.eot');
src: local('PFBeauSansPro-Thin'),
url('/templates/modern/css/fonts/PFBeauSansPro-Thin.eot?#iefix') format('embedded-opentype'),
url('/templates/modern/css/fonts/PFBeauSansPro-Thin.woff2') format('woff2'),
url('/templates/modern/css/fonts/PFBeauSansPro-Thin.woff') format('woff'),
url('/templates/modern/css/fonts/PFBeauSansPro-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}

@font-face {
font-family: 'PF BeauSans Pro XThin';
src: url('/templates/modern/css/fonts/PFBeauSansPro-XThin.eot');
src: local('PFBeauSansPro-XThin'),
url('/templates/modern/css/fonts/PFBeauSansPro-XThin.eot?#iefix') format('embedded-opentype'),
url('/templates/modern/css/fonts/PFBeauSansPro-XThin.woff2') format('woff2'),
url('/templates/modern/css/fonts/PFBeauSansPro-XThin.woff') format('woff'),
url('/templates/modern/css/fonts/PFBeauSansPro-XThin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}

@font-face {
font-family: 'PF BeauSans Pro';
src: url('/templates/modern/css/fonts/PFBeauSansPro-SemiBold.eot');
src: local('PFBeauSansPro-SemiBold'),
url('/templates/modern/css/fonts/PFBeauSansPro-SemiBold.eot?#iefix') format('embedded-opentype'),
url('/templates/modern/css/fonts/PFBeauSansPro-SemiBold.woff2') format('woff2'),
url('/templates/modern/css/fonts/PFBeauSansPro-SemiBold.woff') format('woff'),
url('/templates/modern/css/fonts/PFBeauSansPro-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}

@font-face {
font-family: 'PF BeauSans Pro';
src: url('/templates/modern/css/fonts/PFBeauSansPro-Bold.eot');
src: local('PFBeauSansPro-Bold'),
url('/templates/modern/css/fonts/PFBeauSansPro-Bold.eot?#iefix') format('embedded-opentype'),
url('/templates/modern/css/fonts/PFBeauSansPro-Bold.woff2') format('woff2'),
url('/templates/modern/css/fonts/PFBeauSansPro-Bold.woff') format('woff'),
url('/templates/modern/css/fonts/PFBeauSansPro-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'PF BeauSans Pro';
src: url('/templates/modern/css/fonts/PFBeauSansPro-SemiBoldItalic.eot');
src: local('PFBeauSansPro-SemiBoldItalic'),
url('/templates/modern/css/fonts/PFBeauSansPro-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
url('/templates/modern/css/fonts/PFBeauSansPro-SemiBoldItalic.woff2') format('woff2'),
url('/templates/modern/css/fonts/PFBeauSansPro-SemiBoldItalic.woff') format('woff'),
url('/templates/modern/css/fonts/PFBeauSansPro-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}

@font-face {
font-family: 'PF BeauSans Pro Bbook';
src: url('/templates/modern/css/fonts/PFBeauSansPro-BbookItalic.eot');
src: local('PFBeauSansPro-BbookItalic'),
url('/templates/modern/css/fonts/PFBeauSansPro-BbookItalic.eot?#iefix') format('embedded-opentype'),
url('/templates/modern/css/fonts/PFBeauSansPro-BbookItalic.woff2') format('woff2'),
url('/templates/modern/css/fonts/PFBeauSansPro-BbookItalic.woff') format('woff'),
url('/templates/modern/css/fonts/PFBeauSansPro-BbookItalic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
}

@font-face {
font-family: 'PF BeauSans Pro';
src: url('/templates/modern/css/fonts/PFBeauSansPro-LightItalic.eot');
src: local('PFBeauSansPro-LightItalic'),
url('/templates/modern/css/fonts/PFBeauSansPro-LightItalic.eot?#iefix') format('embedded-opentype'),
url('/templates/modern/css/fonts/PFBeauSansPro-LightItalic.woff2') format('woff2'),
url('/templates/modern/css/fonts/PFBeauSansPro-LightItalic.woff') format('woff'),
url('/templates/modern/css/fonts/PFBeauSansPro-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}

@font-face {
font-family: 'PF BeauSans Pro';
src: url('/templates/modern/css/fonts/PFBeauSansPro-Italic.eot');
src: local('PFBeauSansPro-Italic'),
url('/templates/modern/css/fonts/PFBeauSansPro-Italic.eot?#iefix') format('embedded-opentype'),
url('/templates/modern/css/fonts/PFBeauSansPro-Italic.woff2') format('woff2'),
url('/templates/modern/css/fonts/PFBeauSansPro-Italic.woff') format('woff'),
url('/templates/modern/css/fonts/PFBeauSansPro-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}

@font-face {
font-family: 'PF BeauSans Pro';
src: url('/templates/modern/css/fonts/PFBeauSansPro-Regular.eot');
src: local('PFBeauSansPro-Regular'),
url('/templates/modern/css/fonts/PFBeauSansPro-Regular.eot?#iefix') format('embedded-opentype'),
url('/templates/modern/css/fonts/PFBeauSansPro-Regular.woff2') format('woff2'),
url('/templates/modern/css/fonts/PFBeauSansPro-Regular.woff') format('woff'),
url('/templates/modern/css/fonts/PFBeauSansPro-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'PF BeauSans Pro';
src: url('/templates/modern/css/fonts/PFBeauSansPro-BlackItalic.eot');
src: local('PFBeauSansPro-BlackItalic'),
url('/templates/modern/css/fonts/PFBeauSansPro-BlackItalic.eot?#iefix') format('embedded-opentype'),
url('/templates/modern/css/fonts/PFBeauSansPro-BlackItalic.woff2') format('woff2'),
url('/templates/modern/css/fonts/PFBeauSansPro-BlackItalic.woff') format('woff'),
url('/templates/modern/css/fonts/PFBeauSansPro-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}

body {
font-family: 'PF BeauSans Pro'; /* Установил шрифт по умолчанию */
}
Сократить пути мне не удалось. Сработало именно с путями от корня сайта.

5. В админке, в Настройках темы жмем кнопку Сохранить и скомпилировать SCSS. По окончании компиляции проверяем результат. Если нигде не накосячили, текст появится без задержек не переключаясь на дефолтный и увидите свой шрифт на сайте.
По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей
0
Как ведет себя сайт в Firefox
Вопросы по мультиязычности
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Похожие темы

Запрос смена группы пользователя

Релизы 2.X Создана 11 месяцев назад 9 сообщений

Смена редактора

Сайт и форум проекта Создана 4 года назад 1 сообщение

Смена фона всего сайта

Шаблоны, графика, стили Создана 4 года назад 6 сообщений

[ЕСТЬ РЕШЕНИЕ] Смена почты

Управление пользователями Создана 4 года назад 6 сообщений

Не работает смена шаблон контейнера для объединенных виджетов

Релизы 2.X Создана 3 года назад 3 сообщения

Компонент "Смена владельца записи"

Разработка дополнений Создана 3 года назад 12 сообщений

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.