Reputation: 12161
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.
Upvotes: 0
Views: 161
Reputation: 8294
@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 */
}
Upvotes: 0
Reputation: 16828
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'
}
Upvotes: 1