Перейти к содержимому


Помогите Подключить Шрифт

Автор Малыгин Артём, 17 июня 2018 23:25

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 26

#1 Малыгин Артём

Малыгин Артём

    Пользователь

  • Пользователи
  • PipPip
  • 18 сообщений

Отправлено 17 Июнь 2018 - 23:25

Хочу подключить данные шрифты на сайт, как это сделать? https://webfonts.pro...e/44-circe.html

#2 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 18 Июнь 2018 - 11:46

Просмотр сообщенияМалыгин Артём (17 Июнь 2018 - 23:25) писал:

Хочу подключить данные шрифты на сайт, как это сделать? https://webfonts.pro...e/44-circe.html

Здравствуйте. Вам нужно все файлы из архива загрузить в раздел Сайт - Редактор шаблонов, кроме файла demo.html и далее написать нам, мы поможем его подключить

#3 Малыгин Артём

Малыгин Артём

    Пользователь

  • Пользователи
  • PipPip
  • 18 сообщений

Отправлено 18 Июнь 2018 - 15:05

Просмотр сообщенияMikDark (18 Июнь 2018 - 11:46) писал:

Здравствуйте. Вам нужно все файлы из архива загрузить в раздел Сайт - Редактор шаблонов, кроме файла demo.html и далее написать нам, мы поможем его подключить


Загрузил.

#4 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 18 Июнь 2018 - 16:01

Просмотр сообщенияМалыгин Артём (18 Июнь 2018 - 15:05) писал:

Загрузил.

Теперь в шаблоне HTML перед строкой:

  <link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}main.css?design=summer">

добавьте:

  <link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}stylesheet.css?design=summer">

и содержание шаблона stylesheet.css замените на:

/* This stylesheet generated by Transfonter (https://transfonter.org) on June 26, 2017 11:20 AM */
@font-face {
font-family: 'Circe';
src: url('/design/Circe-Regular.eot');
src: local('Circe'), local('Circe-Regular'),
  url('/design/Circe-Regular.eot?#iefix') format('embedded-opentype'),
  url('/design/Circe-Regular.woff') format('woff'),
  url('/design/Circe-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Circe';
src: url('/design/Circe-ExtraLight.eot');
src: local('Circe ExtraLight'), local('Circe-ExtraLight'),
  url('/design/Circe-ExtraLight.eot?#iefix') format('embedded-opentype'),
  url('/design/Circe-ExtraLight.woff') format('woff'),
  url('/design/Circe-ExtraLight.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'Circe';
src: url('/design/Circe-Thin.eot');
src: local('Circe Thin'), local('Circe-Thin'),
  url('/design/Circe-Thin.eot?#iefix') format('embedded-opentype'),
  url('/design/Circe-Thin.woff') format('woff'),
  url('/design/Circe-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Circe';
src: url('/design/Circe-Light.eot');
src: local('Circe Light'), local('Circe-Light'),
  url('/design/Circe-Light.eot?#iefix') format('embedded-opentype'),
  url('/design/Circe-Light.woff') format('woff'),
  url('/design/Circe-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Circe';
src: url('/design/Circe-Bold.eot');
src: local('Circe Bold'), local('Circe-Bold'),
  url('/design/Circe-Bold.eot?#iefix') format('embedded-opentype'),
  url('/design/Circe-Bold.woff') format('woff'),
  url('/design/Circe-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Circe';
src: url('/design/Circe-ExtraBold.eot');
src: local('Circe ExtraBold'), local('Circe-ExtraBold'),
  url('/design/Circe-ExtraBold.eot?#iefix') format('embedded-opentype'),
  url('/design/Circe-ExtraBold.woff') format('woff'),
  url('/design/Circe-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}

И уточните, Вы хотите для всего текста поменять шрифт на этот или для какого-то конкретного?

#5 Малыгин Артём

Малыгин Артём

    Пользователь

  • Пользователи
  • PipPip
  • 18 сообщений

Отправлено 18 Июнь 2018 - 20:57

Просмотр сообщенияMikDark (18 Июнь 2018 - 16:01) писал:

Теперь в шаблоне HTML перед строкой:

<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}main.css?design=summer">

добавьте:

<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}stylesheet.css?design=summer">

и содержание шаблона stylesheet.css замените на:

/* This stylesheet generated by Transfonter (https://transfonter.org) on June 26, 2017 11:20 AM */
@font-face {
font-family: 'Circe';
src: url('/design/Circe-Regular.eot');
src: local('Circe'), local('Circe-Regular'),
url('/design/Circe-Regular.eot?#iefix') format('embedded-opentype'),
url('/design/Circe-Regular.woff') format('woff'),
url('/design/Circe-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Circe';
src: url('/design/Circe-ExtraLight.eot');
src: local('Circe ExtraLight'), local('Circe-ExtraLight'),
url('/design/Circe-ExtraLight.eot?#iefix') format('embedded-opentype'),
url('/design/Circe-ExtraLight.woff') format('woff'),
url('/design/Circe-ExtraLight.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'Circe';
src: url('/design/Circe-Thin.eot');
src: local('Circe Thin'), local('Circe-Thin'),
url('/design/Circe-Thin.eot?#iefix') format('embedded-opentype'),
url('/design/Circe-Thin.woff') format('woff'),
url('/design/Circe-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Circe';
src: url('/design/Circe-Light.eot');
src: local('Circe Light'), local('Circe-Light'),
url('/design/Circe-Light.eot?#iefix') format('embedded-opentype'),
url('/design/Circe-Light.woff') format('woff'),
url('/design/Circe-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Circe';
src: url('/design/Circe-Bold.eot');
src: local('Circe Bold'), local('Circe-Bold'),
url('/design/Circe-Bold.eot?#iefix') format('embedded-opentype'),
url('/design/Circe-Bold.woff') format('woff'),
url('/design/Circe-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Circe';
src: url('/design/Circe-ExtraBold.eot');
src: local('Circe ExtraBold'), local('Circe-ExtraBold'),
url('/design/Circe-ExtraBold.eot?#iefix') format('embedded-opentype'),
url('/design/Circe-ExtraBold.woff') format('woff'),
url('/design/Circe-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}

И уточните, Вы хотите для всего текста поменять шрифт на этот или для какого-то конкретного?

Сделал. Для всего текста. Большое  спасибо за помощь.

#6 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 19 Июнь 2018 - 01:24

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
body {font-family: PT Sans, arial, serif;font-size: 14px;line-height: 18px;font-weight: 400;color: #8b8b8b;overflow-x: hidden;position: relative;background-color: #ffffff;margin:0;padding:0;}


замените на:
body {font-family: "Circe", Helvetica, sans-serif;font-size: 14px;line-height: 18px;color: #8b8b8b;overflow-x: hidden;position: relative;background-color: #ffffff;margin:0;padding:0;}

#7 Малыгин Артём

Малыгин Артём

    Пользователь

  • Пользователи
  • PipPip
  • 18 сообщений

Отправлено 19 Июнь 2018 - 09:38

Просмотр сообщенияVaccina (19 Июнь 2018 - 01:24) писал:

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
body {font-family: PT Sans, arial, serif;font-size: 14px;line-height: 18px;font-weight: 400;color: #8b8b8b;overflow-x: hidden;position: relative;background-color: #ffffff;margin:0;padding:0;}


замените на:
body {font-family: "Circe", Helvetica, sans-serif;font-size: 14px;line-height: 18px;color: #8b8b8b;overflow-x: hidden;position: relative;background-color: #ffffff;margin:0;padding:0;}

Спасибо, а если я захочу изменить шрифт или размер шрифта или тип шрифта в каком-то конкретном месте, есть какой-то универсальный способ по нахождению строчки в коде и изменению шрифта?

#8 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 19 Июнь 2018 - 10:45

Просмотр сообщенияМалыгин Артём (19 Июнь 2018 - 09:38) писал:

Спасибо, а если я захочу изменить шрифт или размер шрифта или тип шрифта в каком-то конкретном месте, есть какой-то универсальный способ по нахождению строчки в коде и изменению шрифта?

Вы можете воспользоваться инструкцией https://forum.storel...нужно-производ/

#9 Малыгин Артём

Малыгин Артём

    Пользователь

  • Пользователи
  • PipPip
  • 18 сообщений

Отправлено 20 Июнь 2018 - 03:07

А если, например, я хочу изменить шрифт с Circe-Bold на Circe-Regular в данном месте, как мне это сделать? Перечитывал мануал несколько раз, выполнял действия, но на этапе внесения изменений в код css впадаю в ступор, потому что изменения вносить просто не куда, могли бы вы мне помочь и описать ход действий? Изображение

#10 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 20 Июнь 2018 - 05:07

Здравствуйте.

Для описания вы можете отдельно задавать стили, зайдите в редактирование страницы - в поле "Описание" нажмите "Источник" и получите текст в виде кода и уже в нем вы можете указать отдельно шрифтовой стиль для каждого необходимого предложения или слова, например через:
style="font-family: "Circe", Helvetica, sans-serif;"

Было:
<p color:="" font-size:="" line-height:="" open="" pt="" style="box-sizing: border-box; margin-bottom: 26px; font-family: " text-align:="">Простые и удобные условия гарантийного обслуживания, обмена и возврата &ndash; основа клиентского сервиса. Кроме того, это одна из составляющих репутации нашего магазина. А так как мы заботимся о наших клиентах и о собственной репутации, репутации бренда, который представляем в нашей стране, мы сделали все, чтобы условия обмена и возврата были удобными каждому нашему покупателю.</p>

стало:
<p style="box-sizing: border-box; margin-bottom: 26px; font-family: "Circe", Helvetica, sans-serif;">Простые и удобные условия гарантийного обслуживания, обмена и возврата &ndash; основа клиентского сервиса. Кроме того, это одна из составляющих репутации нашего магазина. А так как мы заботимся о наших клиентах и о собственной репутации, репутации бренда, который представляем в нашей стране, мы сделали все, чтобы условия обмена и возврата были удобными каждому нашему покупателю.</p>

#11 Малыгин Артём

Малыгин Артём

    Пользователь

  • Пользователи
  • PipPip
  • 18 сообщений

Отправлено 20 Июнь 2018 - 16:40

У меня нет такого кода, как у Вас в "было", у меня вот так, что и где тут менять не очень понял.

Изображение

#12 Малыгин Артём

Малыгин Артём

    Пользователь

  • Пользователи
  • PipPip
  • 18 сообщений

Отправлено 20 Июнь 2018 - 16:47

Ещё хотелось бы цену поправить, а то немного влево съехала
      Изображение


#13 Малыгин Артём

Малыгин Артём

    Пользователь

  • Пользователи
  • PipPip
  • 18 сообщений

Отправлено 20 Июнь 2018 - 23:06

Просмотр сообщенияVaccina (20 Июнь 2018 - 05:07) писал:

Здравствуйте.

Для описания вы можете отдельно задавать стили, зайдите в редактирование страницы - в поле "Описание" нажмите "Источник" и получите текст в виде кода и уже в нем вы можете указать отдельно шрифтовой стиль для каждого необходимого предложения или слова, например через:
style="font-family: "Circe", Helvetica, sans-serif;"

Было:
<p color:="" font-size:="" line-height:="" open="" pt="" style="box-sizing: border-box; margin-bottom: 26px; font-family: " text-align:="">Простые и удобные условия гарантийного обслуживания, обмена и возврата &ndash; основа клиентского сервиса. Кроме того, это одна из составляющих репутации нашего магазина. А так как мы заботимся о наших клиентах и о собственной репутации, репутации бренда, который представляем в нашей стране, мы сделали все, чтобы условия обмена и возврата были удобными каждому нашему покупателю.</p>

стало:
<p style="box-sizing: border-box; margin-bottom: 26px; font-family: "Circe", Helvetica, sans-serif;">Простые и удобные условия гарантийного обслуживания, обмена и возврата &ndash; основа клиентского сервиса. Кроме того, это одна из составляющих репутации нашего магазина. А так как мы заботимся о наших клиентах и о собственной репутации, репутации бренда, который представляем в нашей стране, мы сделали все, чтобы условия обмена и возврата были удобными каждому нашему покупателю.</p>

Жду ответа

#14 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 21 Июнь 2018 - 05:46

Здравствуйте.

Просмотр сообщенияМалыгин Артём (20 Июнь 2018 - 16:40) писал:

У меня нет такого кода, как у Вас в "было", у меня вот так, что и где тут менять не очень понял.

Пример кода брался из товара на скриншоте из вашего сообщения #9. Основываясь на скриншоте из сообщения #11 можно часть текста обернуть в тег и задать стиль по примеру ниже, было:
Простые и удобные условия гарантийного обслуживания, обмена и возврата &ndash; основа клиентского сервиса. Кроме того, это одна из составляющих репутации нашего магазина. А так как мы заботимся о наших клиентах и о собственной репутации, репутации бренда, который представляем в нашей стране, мы сделали все, чтобы условия обмена и возврата были удобными каждому нашему покупателю.&nbsp;<br />
<br />

стало:
<span style="font-family: "Circe", Helvetica, sans-serif;">Простые и удобные условия гарантийного обслуживания, обмена и возврата &ndash; основа клиентского сервиса. Кроме того, это одна из составляющих репутации нашего магазина. А так как мы заботимся о наших клиентах и о собственной репутации, репутации бренда, который представляем в нашей стране, мы сделали все, чтобы условия обмена и возврата были удобными каждому нашему покупателю.&nbsp;<br />
<br /></span>

Просмотр сообщенияМалыгин Артём (20 Июнь 2018 - 16:47) писал:

Ещё хотелось бы цену поправить, а то немного влево съехала   

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.products-grid .item .item-info .price-box span.price {display: inline-block;margin: 0 10px 0 0;}

замените на:
.products-grid .item .item-info .price-box span.price {display: inline-block;margin: 0;}

#15 Малыгин Артём

Малыгин Артём

    Пользователь

  • Пользователи
  • PipPip
  • 18 сообщений

Отправлено 21 Июнь 2018 - 13:41

Просмотр сообщенияVaccina (21 Июнь 2018 - 05:46) писал:

Здравствуйте.



Пример кода брался из товара на скриншоте из вашего сообщения #9. Основываясь на скриншоте из сообщения #11 можно часть текста обернуть в тег и задать стиль по примеру ниже, было:
Простые и удобные условия гарантийного обслуживания, обмена и возврата &ndash; основа клиентского сервиса. Кроме того, это одна из составляющих репутации нашего магазина. А так как мы заботимся о наших клиентах и о собственной репутации, репутации бренда, который представляем в нашей стране, мы сделали все, чтобы условия обмена и возврата были удобными каждому нашему покупателю.&nbsp;<br />
<br />

стало:
<span style="font-family: "Circe", Helvetica, sans-serif;">Простые и удобные условия гарантийного обслуживания, обмена и возврата &ndash; основа клиентского сервиса. Кроме того, это одна из составляющих репутации нашего магазина. А так как мы заботимся о наших клиентах и о собственной репутации, репутации бренда, который представляем в нашей стране, мы сделали все, чтобы условия обмена и возврата были удобными каждому нашему покупателю.&nbsp;<br />
<br /></span>



Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.products-grid .item .item-info .price-box span.price {display: inline-block;margin: 0 10px 0 0;}

замените на:
.products-grid .item .item-info .price-box span.price {display: inline-block;margin: 0;}

После преобразования из БЫЛО в СТАЛО и нажатия кнопки сохранить, ничего не меняется, а строка кода изменения выглядит так:

БЫЛО

Простые и удобные условия гарантийного обслуживания, обмена и возврата &ndash; основа клиентского сервиса. Кроме того, это одна из составляющих репутации нашего магазина. А так как мы заботимся о наших клиентах и о собственной репутации, репутации бренда, который представляем в нашей стране, мы сделали все, чтобы условия обмена и возврата были удобными каждому нашему покупателю.&nbsp;<br />
<br />

ЗАМЕНЯЮ НА 

<span style="font-family: "Circe-Regular", Helvetica, sans-serif;">Простые и удобные условия гарантийного обслуживания, обмена и возврата &ndash; основа клиентского сервиса. Кроме того, это одна из составляющих репутации нашего магазина. А так как мы заботимся о наших клиентах и о собственной репутации, репутации бренда, который представляем в нашей стране, мы сделали все, чтобы условия обмена и возврата были удобными каждому нашему покупателю.&nbsp;<br />
<br /></span>

ПОЛУЧАЕТСЯ просто вот так, названия шрифтов просто исчезают после нажатия кнопки сохранить

<span style="font-family: ">Простые и удобные условия гарантийного обслуживания, обмена и возврата &ndash; основа клиентского сервиса. Кроме того, это одна из составляющих репутации нашего магазина. А так как мы заботимся о наших клиентах и о собственной репутации, репутации бренда, который представляем в нашей стране, мы сделали все, чтобы условия обмена и возврата были удобными каждому нашему покупателю.&nbsp;</span><br />
<br />

#16 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 22 Июнь 2018 - 06:53

Простите, синтаксическую ошибку допустила с кавычками, вместо:
<span style="font-family: "Circe-Regular", Helvetica, sans-serif;">Простые и удобные условия гарантийного обслуживания, обмена и возврата &ndash; основа клиентского сервиса. Кроме того, это одна из составляющих репутации нашего магазина. А так как мы заботимся о наших клиентах и о собственной репутации, репутации бренда, который представляем в нашей стране, мы сделали все, чтобы условия обмена и возврата были удобными каждому нашему покупателю.&nbsp;<br />
<br /></span>

замените на:
<span style="font-family: 'Circe-Regular', Helvetica, sans-serif;">Простые и удобные условия гарантийного обслуживания, обмена и возврата &ndash; основа клиентского сервиса. Кроме того, это одна из составляющих репутации нашего магазина. А так как мы заботимся о наших клиентах и о собственной репутации, репутации бренда, который представляем в нашей стране, мы сделали все, чтобы условия обмена и возврата были удобными каждому нашему покупателю.&nbsp;<br />
<br /></span>

Внутри двойных нельзя еще одни двойные указывать =)

#17 Малыгин Артём

Малыгин Артём

    Пользователь

  • Пользователи
  • PipPip
  • 18 сообщений

Отправлено 23 Июнь 2018 - 15:43

Просмотр сообщенияVaccina (22 Июнь 2018 - 06:53) писал:

Простите, синтаксическую ошибку допустила с кавычками, вместо:
<span style="font-family: "Circe-Regular", Helvetica, sans-serif;">Простые и удобные условия гарантийного обслуживания, обмена и возврата &ndash; основа клиентского сервиса. Кроме того, это одна из составляющих репутации нашего магазина. А так как мы заботимся о наших клиентах и о собственной репутации, репутации бренда, который представляем в нашей стране, мы сделали все, чтобы условия обмена и возврата были удобными каждому нашему покупателю.&nbsp;<br />
<br /></span>

замените на:
<span style="font-family: 'Circe-Regular', Helvetica, sans-serif;">Простые и удобные условия гарантийного обслуживания, обмена и возврата &ndash; основа клиентского сервиса. Кроме того, это одна из составляющих репутации нашего магазина. А так как мы заботимся о наших клиентах и о собственной репутации, репутации бренда, который представляем в нашей стране, мы сделали все, чтобы условия обмена и возврата были удобными каждому нашему покупателю.&nbsp;<br />
<br /></span>

Внутри двойных нельзя еще одни двойные указывать =)

Спасибо, но шрифт  не меняется на тот который нужен, а принимает вот такой вид, тот шрифт, который нужен, не подключён? Какой бы шрифт я не поставил в коде для определённой строки, она принимает одинаковый вид

Изображение

Я об этих шрифтах:
Circe Thin
Circe Extra Light
Circe Light
Circe Regular
Circe Bold
Circe Extra Bold

#18 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 709 сообщений

Отправлено 26 Июнь 2018 - 16:58

Просмотр сообщенияМалыгин Артём (23 Июнь 2018 - 15:43) писал:

Спасибо, но шрифт  не меняется на тот который нужен, а принимает вот такой вид, тот шрифт, который нужен, не подключён? Какой бы шрифт я не поставил в коде для определённой строки, она принимает одинаковый вид

Изображение

Я об этих шрифтах:
Circe Thin
Circe Extra Light
Circe Light
Circe Regular
Circe Bold
Circe Extra Bold
Здравствуйте, на данный момент у Вас шрифт сработал и текст на главной странице отображается при помощи Circe Bold.

#19 Малыгин Артём

Малыгин Артём

    Пользователь

  • Пользователи
  • PipPip
  • 18 сообщений

Отправлено 26 Июнь 2018 - 22:19

Просмотр сообщенияИрина345 (26 Июнь 2018 - 16:58) писал:

Здравствуйте, на данный момент у Вас шрифт сработал и текст на главной странице отображается при помощи Circe Bold.

Потому что я сменил обратно, никакой шрифт кроме этого не срабатывает

#20 Малыгин Артём

Малыгин Артём

    Пользователь

  • Пользователи
  • PipPip
  • 18 сообщений

Отправлено 27 Июнь 2018 - 23:30

Просмотр сообщенияИрина345 (26 Июнь 2018 - 16:58) писал:

Здравствуйте, на данный момент у Вас шрифт сработал и текст на главной странице отображается при помощи Circe Bold.

Так что помогите сменить на  Circe-Regular например, пожалуйста
Обратно в Изменение общей стилистики


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Вопросы общие для всех шаблонов
  5. → Изменение общей стилистики
  6. Privacy Policy