Не удалось загрузить @ font-face с Chrome, ошибка с jquery? - PullRequest
Новая
       6

Не удалось загрузить @ font-face с Chrome, ошибка с jquery?

0 голосов
/ 12 июня 2018

Попытка загрузить @ font-face в Chrome, не тестировалась в других браузерах. 

@font-face {
font-family: titleFont;
src: url('/fonts/VanadineBold.ttf') format("truetype");
/*Have also tried...*/
/*src: url('/fonts/VanadineBold.woff') format("woff");*/
/*src: url('/fonts/VanadineBold.woff2') format("woff2");*/
font-weight: normal;
font-style: normal;
}

p#title {
font-family: titleFont, sans-serif;
position: absolute;
top: 5%;
left: 50%;
transform: translate(-50%, -50%);
}

Keep загружает шрифт как sans-serif, а также выдает эту ошибку в консоли ..? 

jquery.min.js:2 GET http://localhost:63342/fonts/VanadineBold.ttf 404 (Not Found)

Это структура моей папки ...

Корневая папка:

Root folder

Внутри папки шрифтов: Inside the fonts folder

1 Ответ

0 голосов
/ 12 июня 2018

Глядя на этот документ , кажется, что формат ('truetype') для Safari. 

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Попробуйте использовать шрифт .woff для хрома: 

src: url('webfont.woff') format('woff')
...