Back To Website Design Forum

Question about @font-face

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post March 9th, 2012, 1:47 pm

Take a look at this open-type font: http://www.fontsquirrel.com/fonts/Quicksand

Notice how the last "style" in the font family is "dashed". How do you build an @font-face declaration in your css to accomodate for odd styles such as these? I tried declaring it as the font style for that typeface, but it doesn't work as it should:
CSS Code: [ Select ]
@font-face {
      font-family: 'Quicksand';
      src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Bold-webfont.eot');
      src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Bold-webfont.eot?#iefix') format('embedded-opentype'),
          url('../mixins/font-face/fonts/Quicksand/Quicksand_Bold-webfont.woff') format('woff'),
          url('../mixins/font-face/fonts/Quicksand/Quicksand_Bold-webfont.ttf') format('truetype'),
          url('../mixins/font-face/fonts/Quicksand/Quicksand_Bold-webfont.svg#QuicksandBold') format('svg');
      font-weight: bold;
      font-style: normal;
}
 
@font-face {
      font-family: 'Quicksand';
      src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Dash-webfont.eot');
      src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Dash-webfont.eot?#iefix') format('embedded-opentype'),
          url('../mixins/font-face/fonts/Quicksand/Quicksand_Dash-webfont.woff') format('woff'),
          url('../mixins/font-face/fonts/Quicksand/Quicksand_Dash-webfont.ttf') format('truetype'),
          url('../mixins/font-face/fonts/Quicksand/Quicksand_Dash-webfont.svg#QuicksandDash') format('svg');
      font-weight: normal;
      font-style: dashed;
}
 
@font-face {
      font-family: 'Quicksand';
      src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Light_Oblique-webfont.eot');
      src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Light_Oblique-webfont.eot?#iefix') format('embedded-opentype'),
          url('../mixins/font-face/fonts/Quicksand/Quicksand_Light_Oblique-webfont.woff') format('woff'),
          url('../mixins/font-face/fonts/Quicksand/Quicksand_Light_Oblique-webfont.ttf') format('truetype'),
          url('../mixins/font-face/fonts/Quicksand/Quicksand_Light_Oblique-webfont.svg#QuicksandLightOblique') format('svg');
      font-weight: lighter;
      font-style: italic;
}
 
  1. @font-face {
  2.       font-family: 'Quicksand';
  3.       src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Bold-webfont.eot');
  4.       src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Bold-webfont.eot?#iefix') format('embedded-opentype'),
  5.           url('../mixins/font-face/fonts/Quicksand/Quicksand_Bold-webfont.woff') format('woff'),
  6.           url('../mixins/font-face/fonts/Quicksand/Quicksand_Bold-webfont.ttf') format('truetype'),
  7.           url('../mixins/font-face/fonts/Quicksand/Quicksand_Bold-webfont.svg#QuicksandBold') format('svg');
  8.       font-weight: bold;
  9.       font-style: normal;
  10. }
  11.  
  12. @font-face {
  13.       font-family: 'Quicksand';
  14.       src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Dash-webfont.eot');
  15.       src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Dash-webfont.eot?#iefix') format('embedded-opentype'),
  16.           url('../mixins/font-face/fonts/Quicksand/Quicksand_Dash-webfont.woff') format('woff'),
  17.           url('../mixins/font-face/fonts/Quicksand/Quicksand_Dash-webfont.ttf') format('truetype'),
  18.           url('../mixins/font-face/fonts/Quicksand/Quicksand_Dash-webfont.svg#QuicksandDash') format('svg');
  19.       font-weight: normal;
  20.       font-style: dashed;
  21. }
  22.  
  23. @font-face {
  24.       font-family: 'Quicksand';
  25.       src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Light_Oblique-webfont.eot');
  26.       src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Light_Oblique-webfont.eot?#iefix') format('embedded-opentype'),
  27.           url('../mixins/font-face/fonts/Quicksand/Quicksand_Light_Oblique-webfont.woff') format('woff'),
  28.           url('../mixins/font-face/fonts/Quicksand/Quicksand_Light_Oblique-webfont.ttf') format('truetype'),
  29.           url('../mixins/font-face/fonts/Quicksand/Quicksand_Light_Oblique-webfont.svg#QuicksandLightOblique') format('svg');
  30.       font-weight: lighter;
  31.       font-style: italic;
  32. }
  33.  

This doesn't work as you would expect (more than likely because "dashed" in not a valid value for font-style). If I try to use any other style of the font, the "dashed" version is always displayed:
CSS Code: [ Select ]
p {
      font-family: Quicksand;
      font-style: normal;
}
 
  1. p {
  2.       font-family: Quicksand;
  3.       font-style: normal;
  4. }
  5.  

This ends up displaying the "dashed" style on all paragraphs. So is there a valid way (or any) way to get css to recognize this font style?

This is obviously just an example case, but other problems arise with different fonts. For instance, Alfredo Has 2 examples that wouldn't be accessible. The Alfredo font has a "Heavy" version. That's easy enough to define, but what about "Hollow", "Condensed", "Expanded", or "Wide"? Can't really define those as subsets of a font-family - you would have to define each one as a new font-face declaration under a new font-family name.
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post March 9th, 2012, 1:47 pm

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8934
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post March 9th, 2012, 2:13 pm

I believe all you are doing here is defining the font's that your CSS can use. Your webpage will not know the difference between the actual fonts, you could make your bold normal, your italic bold, and your normal italic if you really wanted. It is up to you and how you define them. You will have to use valid CSS font-style's for the definition. If you have an extra style that you want to use, then what you will have to do is create a new font-family for that specific one, and put the font-style as normal (or whatever you like as long as its a valid value).
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post March 9th, 2012, 2:22 pm

Yeah, I could just use a new font-family declaration; it's just not very intuitive. Nor does it follow the idea I believe the W3C was going for when they created this @font-face statement. It's kind of counter intuitive to do this:
CSS Code: [ Select ]
p {
      font-family: 'Alfredo-hollow-condensed-bold';
}
 
  1. p {
  2.       font-family: 'Alfredo-hollow-condensed-bold';
  3. }
  4.  

Instead of this:
CSS Code: [ Select ]
p {
     font-family: 'Alfredo Hollow';
     font-style: condensed;
     font-weight: bold;
}
 
  1. p {
  2.      font-family: 'Alfredo Hollow';
  3.      font-style: condensed;
  4.      font-weight: bold;
  5. }
  6.  


Especially if someone else ends up maintaining a site down the road. How do they know what to use:
CSS Code: [ Select ]
font-family: 'Alfredo-condensed-bold-hollow';
font-family: 'Alfredo-bold-condensed-hollow';
font-family: 'Alfredo-hollow-condensed-bold';
font-family: 'Alfredo-hollow-bold-condensed';
 
  1. font-family: 'Alfredo-condensed-bold-hollow';
  2. font-family: 'Alfredo-bold-condensed-hollow';
  3. font-family: 'Alfredo-hollow-condensed-bold';
  4. font-family: 'Alfredo-hollow-bold-condensed';
  5.  

Could get confusing quick if you have any more then 2 fonts with 5 or more subesets.
Use your words like arrows to shoot toward your goal.

Page 1 of 1

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 107 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.