How do I load external font to use for my site?

Question

I'm trying to load the external font for my website but it doesn't work as I expected. I want the text to be bold and I loaded the bold version but it doesn't seem to work. I believe JsFiddle work with external font so I copied my code and put it on JsFiddle but still doesn't work.

Here's my jsfiddle

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

Here's how I load the font.

@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'
}

The html is kinda messy because I just copied it form the site. Not sure if I missed anything obvious.

Answer 1

Because browsers load different files for fonts I try and include all of the different types. Your largest issue is that the font-family needs to be the identifier for the font. You are treating it as though it should have "fall back" names, which can't be done.

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

Source .