@font-face Licensing?

Discussion in 'Web Design and Development' started by 7on, Jun 3, 2008.

  1. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #1
    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 :/

    Code:
    @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!
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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)
    Code:
    font-family: "Myriad Pro";
     
  3. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #3
    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
     
  4. 7on thread starter macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #4
    I just thought I'd throw them in as they degrade nicely :D

    EDIT: does the @font-face need quotes as well?
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    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).
     
  6. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #6
    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):

    HTML:
    <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
     

Share This Page