无法使用Chrome加载@ font-face，jquery出错？

Question

尝试在Chrome中加载@ font-face，未经其他浏览器测试。

@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%);
}

保持将字体加载为sans-serif，并在控制台中抛出此错误。？

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

这是我的文件夹结构...

根文件夹：

在fonts文件夹中：

Answer 1

查看this document，格式（＆＃39; truetype＆＃39;）似乎适用于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字体进行chrome：

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