@font-face Licensing?

[7on]

So I was just testing the new CSS3 @font-face and was using a licensed font for the testing (Myriad Pro). Anyway, I couldn't get it to work :/

@font-face {
	font-family: Myriad Pro;
	src: url('../fonts/mp-regular.otf');
}
@font-face {
	font-family: Myriad Pro;
	font-style: italic;
	src: url('../fonts/mp-italic.otf');
}
@font-face {
	font-family: Myriad Pro;
	font-weight: bold;
	src: url('../fonts/mp-bold.otf');
}
@font-face {
	font-family: Myriad Pro;
	font-style: italic;
	font-weight: bold;
	src: url('../fonts/mp-bolditalic.otf');
}
h1 {font-family: Myriad Pro, sans-serif;}

Something like that. Anyway, I couldn't get it to work! :/ Is there DRM in these licensed fonts? Or is my code wack somewhere? Thanks!

 

[angelwatt]

The font family property needs quotes when using names with spaces. Also, only Safari supports this CSS3 property (the @font-face part, not the font-family)

font-family: "Myriad Pro";

 

[SrWebDeveloper]

Just some informal thoughts of mine for public consumption...

I am sooooo looking fwd to the finalizing of the W3C current draft (December 10th 2007) for CSS3, when browser manufacturers will finally have a standard spec and start universally supporting these cool selectors as part of the DOM.

CSS3 will allow

• Min and max width ensure proper display on all screen widths
• Navigation panel displays partial opacity and hover effects
• Multi column layout breaks the text into columns, if lines get too long
• Multi color borders create a fading effect on the sides
• Sidebar widgets and navigation use built-in rounded corners

Just to name a few! Thanks for posting this, you got me all hot and bothered to check out the W3C site for status, and learn more about CSS3. Of course I don't recommend anyone using these features in a production environment as limited as they are, but they're cool in a testing environment, that's for sure! Thumbs up, baby.

-jim

 

[7on]

Just some informal thoughts of mine for public consumption...

I am sooooo looking fwd to the finalizing of the W3C current draft (December 10th 2007) for CSS3, when browser manufacturers will finally have a standard spec and start universally supporting these cool selectors as part of the DOM.

CSS3 will allow

• Min and max width ensure proper display on all screen widths
• Navigation panel displays partial opacity and hover effects
• Multi column layout breaks the text into columns, if lines get too long
• Multi color borders create a fading effect on the sides
• Sidebar widgets and navigation use built-in rounded corners

Just to name a few! Thanks for posting this, you got me all hot and bothered to check out the W3C site for status, and learn more about CSS3. Of course I don't recommend anyone using these features in a production environment as limited as they are, but they're cool in a testing environment, that's for sure! Thumbs up, baby.

-jim

I just thought I'd throw them in as they degrade nicely

EDIT: does the @font-face need quotes as well?

 

[angelwatt]

EDIT: does the @font-face need quotes as well?

Nope. Not sure where you'd have put them either. I haven't used @font-face yet, but if the quoting doesn't work I'll look into it more.

Edit: Check out ALA's article on this. It's possible you need to use the absolute URI to the font, and I'm not sure if otf fonts are supported. Examples I saw were true-type fonts (ttf).

 

[SrWebDeveloper]

According to the actual working draft found at the W3C site, quotes should be around font names with spaces. Then you can define "local" to include local font names or define "URL" to reference a URI for script based font generation or font path. The draft also allows you to define "format" such as TrueType and numerous other formats that are supported.

A simple example (from the link above, verbatim):

<STYLE TYPE="text/css" MEDIA="screen, print">
      @font-face {
        font-family: "Robson Celtic";
        src: url("http://site/fonts/rob-celt")
      }
      H1 { font-family: "Robson Celtic", serif }
</STYLE>

This should be enough to get you started, kindly read the draft for further details and syntax examples.

-jim