Adam
Adam

Reputation: 20882

CSS WOFF Font - Deploy without @Face-Font

I was reading this article and noticed it said if you are only supplying WOFF font to a browser you don't need to use the @Font-Face syntax:

http://css-tricks.com/snippets/css/using-font-face/

Or even just WOFF.

You then use it like this:
 body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

I wanted to ask if this is possible as I'm not sure how this would path to the font file eg: 'myfont.woff'?

Is it possible to include a WOFF webfont without @Font-Face?

thankyou

Upvotes: 0

Views: 202

Answers (1)

Adam Jenkins
Adam Jenkins

Reputation: 55613

The author is not saying not to use @font-face, he's saying you declare it like this:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

and then use it like this:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

When he says you can use just WOFF, he means that you can probably get away with this:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff');
}

Upvotes: 3

Related Questions