如何加載用於網站的外部字體？

Question

我正在嘗試為我的網站加載外部字體，但是它沒有按預期工作。 我希望文本為粗體，並加載了粗體版本，但它似乎不起作用。 我相信JsFiddle可以使用外部字體，因此我復制了代碼並將其放在JsFiddle上，但仍然無法正常工作。

這是我的jsfiddle

http://jsfiddle.net/noppanit/sr1eL3b0/2/

這是我加載字體的方法。

@font-face {
    font-family:'Andale Mono MT Std Bold', 'Open Sans', 'arial', 'sans-serif';
    src: url(http://www.salon87.nyc/wp-content/themes/salon87/vendor/fonts/AndaleMonoMTStd-Bold.ttf);
    /* use src to point to the location of your custom font could be from your local server folder (like ./fonts/) or a remote location. */
}
section {
    font-family:'Andale Mono MT Std Bold'
}

html有點混亂，因為我只是從網站復制了它。 不知道我是否錯過了任何明顯的事情。

Answer 1

因為瀏覽器為字體加載不同的文件，所以我嘗試並包含所有不同的類型。 您最大的問題是， font-family必須是字體的標識符。 您正在將其視為應該具有“后備”名稱，這是無法完成的。

@font-face {
    font-family:'Andale Mono MT Std Bold';
    font-weight:700;
    src: url(FILE_LOCATION.eot) format('embedded-opentype');
    src: url(FILE_LOCATION.eot?#iefix) format('embedded-opentype'),
     url(FILE_LOCATION.woff) format('woff'),
     url(FILE_LOCATION.ttf) format('truetype'),
     url(FILE_LOCATION.svg#levenim) format('svg');
}
section {
    font-family:'Andale Mono MT Std Bold'
}

Answer 2

@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 */
}

來源 。