开发者

Why doesn't this @font-face style apply to my HTML?

开发者 https://www.devze.com 2023-03-06 01:32 出处:网络
I am hoping so开发者_Go百科meone can please point out what\'s not working about this font-face implementation.I\'ve testing this using the body tag so there\'s no question as to whether the issue is w

I am hoping so开发者_Go百科meone can please point out what's not working about this font-face implementation. I've testing this using the body tag so there's no question as to whether the issue is with the HTML (yes, I do have a body tag.)

I have obtained the fonts and the implementation CSS from FontSquirrel. Thanks for looking at this!

CSS:

@font-face {
    font-family: 'DymaxionScriptRegular';
    src: url('DymaxionScript-webfont.eot');
    src: url('DymaxionScript-webfont.eot?#iefix') format('embedded-opentype'),
         url('DymaxionScript-webfont.woff') format('woff'),
         url('DymaxionScript-webfont.ttf') format('truetype'),
         url('DymaxionScript-webfont.svg#DymaxionScriptRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: DymaxionScriptRegular, courier;
}

File tree structure:

Why doesn't this @font-face style apply to my HTML?

Screenshot of Courier fallback font:

Why doesn't this @font-face style apply to my HTML?

Answer: Apparently if one leaves "Regular" off of the font-family declaration, everything works fine. Answered my own question by playing with it.

Real Answer: My first "answer" only worked in Safari. What worked in all of them was changing "'DymaxionScript-webfont..." to '../DymaxionScript-webfont... After I did that, everything worked. It was bad pathing.


Here is a more concise @font-face implementation, that I know works across the board:

@font-face {
    font-family: 'DymaxionScriptRegular';
    src: url('/path/to/font/webfont.eot?') format('eot'),
         url('/path/to/font/webfont.woff') format('woff'), 
         url('/path/to/font/webfont.ttf') format('truetype'),
         url('/path/to/font/webfont.svg#webfont') format('svg');
    font-weight:normal;
    font-style:normal;
}


For various web fonts you can check out google.com/webfonts which has a bunch of different fonts for use, but you just add a link to google's site and it will return the proper formatting for most browsers as far back as ie6


@font-face {

font-family: 'DymaxionScriptRegular';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
     url('webfont.woff') format('woff'),
     url('webfont.ttf') format('truetype'),
     url('webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;

}

body { font-family: DymaxionScriptRegular, courier; }

0

精彩评论

暂无评论...
验证码 换一张
取 消