Как убрать жирный шрифт на мобайле?

Question

[Acidburn8]

Шрифты на десктопе и через инспектор в мобильном режиме отображаются корректно, но если зайти через реальный телефон, то все шрифты становятся жирными. Как пофиксить?

Пример: https://cpmdealer.com/top-gifts/

Comments

[Ankhena]

Ошибки в консоли исправьте.

Answer 1

[Антон Антон]

На мобилке нет шрифта monserrat, используется дефолтный sans-serif (что-то типа roboto). На десктопе, возможно, тоже нет, но подключается какой-нибудь arial. Нужно нормально подключить @font-face

Comments

[Acidburn8]

Т.е есть разделение шрифтов для мобайла и для пк? Не слышал о таком

Шрифты сейчас подключены так:

body {
  background: linear-gradient(to top, #18031c 20%, #13081e 50%, #000000 80%); /*radial-gradient(#202144, #121217);*/
  color: #bdc4ca;
  margin:0;
  font-family: 'Montserrat', sans-serif;
  font-weight: normal;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

@font-face {
    font-family: "Montserrat";
	src: url(https:/cpmdealer.com/wp-content/themes/cpmdealer/css/fonts/Montserrat-Regular.ttf);
    font-weight: 400;
    font-style: normal;
	font-display: swap;
}

/* Montserrat italic */

@font-face {
    font-family: "Montserrat";
	src: url(https://cpmdealer.com/wp-content/themes/cpmdealer/css/fonts/Montserrat-Italic.ttf);
    font-weight: 400;
    font-style: italic;
	font-display: swap;
}

/* Montserrat bold */

@font-face {
    font-family: "Montserrat";
	src: url(https://cpmdealer.com/wp-content/themes/cpmdealer/css/fonts/Montserrat-Bold.ttf);
    font-weight: bold;
    font-style: normal;
	font-display: swap;
}

[Acidburn8]

Acidburn8,

Погуглил в эту сторону, возможно это решение
https://stackoverflow.com/questions/43327227/font-...

отпишу позже

[Acidburn8]

Проблема решилась путем добавления в @fontface дополнительных шрифтов:
Скачивал шриифты и код тут https://google-webfonts-helper.herokuapp.com/fonts...

/* montserrat-regular - latin_cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat/montserrat-v18-latin_cyrillic-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat/montserrat-v18-latin_cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat/montserrat-v18-latin_cyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat/montserrat-v18-latin_cyrillic-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat/montserrat-v18-latin_cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat/montserrat-v18-latin_cyrillic-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-italic - latin_cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/montserrat/montserrat-v18-latin_cyrillic-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat/montserrat-v18-latin_cyrillic-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat/montserrat-v18-latin_cyrillic-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat/montserrat-v18-latin_cyrillic-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat/montserrat-v18-latin_cyrillic-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat/montserrat-v18-latin_cyrillic-italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-700 - latin_cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat/montserrat-v18-latin_cyrillic-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat/montserrat-v18-latin_cyrillic-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat/montserrat-v18-latin_cyrillic-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat/montserrat-v18-latin_cyrillic-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat/montserrat-v18-latin_cyrillic-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat/montserrat-v18-latin_cyrillic-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}

Answer 2

[Vladislav Ivanov]

Потому что в декстопе ты наверное закачал шрифт зарание,а телефоне отображаеться так как и должно

Comments

[Acidburn8]

Это как вообще?)

[Vladislav Ivanov]

честно не знаю, наверное проблема в самой верстки, скинь код я попытаюсь помочь =)

[Acidburn8]

Vladislav Ivanov, а я его и не прячу ;)

[Vladislav Ivanov]

Acidburn8, напиши font-weight для мобайла меньше

[Acidburn8]

Vladislav Ivanov, если как костыль да, возможно подойдет. Но хотелось бы решить проблему :)

[Vladislav Ivanov]

Acidburn8, а чем тебе не решения проблемы ?)