Проблема с отображением шрифтов на сайте, что делать?

Question

[bahovd]

Доброго времени суток. Помогите пожалуйста кто может. Столкнулся с такой проблемой, имеется лендинг пейдж.
Но имеются регулярные проблемы с отображением шрифта, два дня назад шрифты не отображались только в Google Chrome и IE, отображался только в Mozilla. Сегодня обнаружил что шрифт перестал отображаться вовсе на всех браузерах. Хотя повторюсь, что изменения не вносились за последнее время. Пробовал добавлять правила в .htaccess не помогло. Вроде как все записано правильно, не могу понять в чем проблема, в режиме оффлайн сайт отображается корректно. Но есть еще подозрения что как-то не правильно загружается style.css, ибо пропадают последние внесенные изменения вместе со шрифтом.

Исходники index, css - ТУТ

Answer 1

[Сергей Горячев]

Попробуй шрифты подключить НОРМАЛЬНО, а не через Google Fonts.

Comments

[bahovd]

Окей попробую, а вообще есть еще какие-то идеи?

[Сергей Горячев]

bahovd: Если только одно, custom.css стоит ниже style.css, может быть что-то оттуда перекрывает стили.
Остальное трудно сказать.

[bahovd]

Там только стили для карты, и да кстати я нашел возможную проблему, у меня ранее стоял pre-load страницы в этом custom, я забыл из css удалить, сейчас проверю, отпишусь.

[bahovd]

Не помогло, вот содержание :

custom.css

#map {
width: 100%;
height: 570px;
}
.navbar.sleep .ff span {display:none}

.navbar.sleep .ff {background:url(../images/logo.png); width: 274px;
background-size: contain;
/*height: 40px;*/
background-repeat: no-repeat;
margin-top: 10px;}

}

.placed { margin-top: 28px;text-align: center;}

.modal input[type="submit"] { margin: 0 auto;
display: block;}

.six {
position: relative;
}
.adrd {
width: 350px;
background: url(img/soc.png);
padding: 25px;
position: absolute;
left: 50%;
margin-left: -448px;
top: 89px;
z-index: 999;
background: #cc9900;
color: white;
}

.bahov-figure{ height: 366px;}
.bahov-figure:hover{ height: 376px;}

[bahovd]

Залил шрифты нормально, все заработало как надо, спасибо большое, хоть и очевидно, но я почему то не думал что это может быть проблемой, еще раз спасибо за наводку :)

[Сергей Горячев]

bahovd: Поменьше используй CDN, грузи всё с сервера лучше.

[bahovd]

Возьму на заметку, но иногда проще через CDN чем грузить сервер :/

Да и это единственная вещь была, которая через CDN подгружалась, один раз попробовал реализовать, так, и все конечно же пошло не так :/

[bahovd]

А Вы не знаете случайно как можно сгладить шрифт? А то мне кажется у него рваные края.
Просто единственный вариант решения который есть у меня, это присвоить тени ко всем шрифтам, но это немного запарно. Какое нибудь гуманное бы решение найти.

[Сергей Горячев]

bahovd: Сглаживание шрифтов - это работа браузера.
Можно использовать сервис, чтобы шрифт переводился в картинку, но это не лучшее решение)))

[Сергей Горячев]

bahovd: Еще есть костыль, но опять же, не лучшее решение.

.title {
  text-shadow: -1px -1px 1px rgba(255,255,255, 0.2), 
                1px 1px 1px rgba(255,255,255, 0.2), 
                1px 1px 1px rgba(0,0,0, 0.7);
}

[Сергей Горячев]

bahovd: И для верности, можно попробовать с

body {
  -webkit-font-smoothing: subpixel-antialiased !important;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
}

[bahovd]

Sergey Goryachev: Ну с 1 вариантом я знаком, я о нем выше и говорил. А вот второй я сделал, но что-то не особо замечаю разницу :/

[Сергей Горячев]

bahovd: Тогда никак, это браузерные заморочки.

[bahovd]

https://phonetatto.ru/products.html

А не подскажете что можно сделать с мерцанием при наведение на картинки, что-то я пока разбирался с этим текстом, какую-то новую проблему образовал.
Что-то я с таким тоже никогда не сталкивался.

[bahovd]

Sergey Goryachev: dropmefiles.com/2XNT6 на всякий случай исходник.

[Сергей Горячев]

bahovd: не вижу мерцания, только типичное поведение на scale.

[bahovd]

Sergey Goryachev: Но это опять же только в хроме как не странно :/

[bahovd]

И именно на левую сторону, при наведение на правую колонку все нормально, а на первые 3, нижние начинают мигать.