Re: [css-d] @font-face question
On Thu, May 3, 2012 at 9:56 AM, Tom Livingston tom...@gmail.com wrote: Im using a custom font, from Font Squirrel I believe, and am wondering bout font-weight fall back. Don't worry about it-- its a fallback font [let the fallback inherit what the generator sets for the custom font]. Use the generator and check the expert box. No need to modify anything within that block. http://www.fontsquirrel.com/fontface/generator Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @font-face question
On Thu, May 3, 2012 at 10:15 AM, David Laakso laakso.davi...@gmail.com wrote: On Thu, May 3, 2012 at 9:56 AM, Tom Livingston tom...@gmail.com wrote: Im using a custom font, from Font Squirrel I believe, and am wondering bout font-weight fall back. Don't worry about it-- its a fallback font [let the fallback inherit what the generator sets for the custom font]. Use the generator and check the expert box. No need to modify anything within that block. http://www.fontsquirrel.com/fontface/generator Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com Thanks David. About the Generator, I'm not sure how this will help me. We got the fonts from FS anyway using the @font-face kit for that font. Am I missing something? Also, I'm not sure how the fallback will inherit anything. When I remove the custom font from the stack, I do not get bold. Am I not understanding your comment? Thanks again -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @font-face question
On May 3, 2012, at 10:56 PM, Tom Livingston wrote:
If I'm using RobotoBold - custom font - in my stack on an h2 for
example, I have to spec font-weight: normal; as well because otherwise
it double-bolds the font. But if the user sees a fallback font of
Helvetica or Arial, they won't get it in a bold weight. Is there
anything that can be done about this that I'm not seeing? Can only the
fall backs be bold?
I'm not sure I understand. Care to put an example ?
@fontface {
font-family: RobotoBold;
src: url(RobotoBold.woff);
font-weight: bold;
}
h2 { font-family: RobotoBold, Helvetica, Comic Sans; font-weight: bold; }
with that there should not be any artificial bolding. Browser will (should)
treat that font as being a bold face.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @font-face question
On Thu, May 3, 2012 at 10:54 AM, Philippe Wittenbergh e...@l-c-n.com wrote:
On May 3, 2012, at 10:56 PM, Tom Livingston wrote:
If I'm using RobotoBold - custom font - in my stack on an h2 for
example, I have to spec font-weight: normal; as well because otherwise
it double-bolds the font. But if the user sees a fallback font of
Helvetica or Arial, they won't get it in a bold weight. Is there
anything that can be done about this that I'm not seeing? Can only the
fall backs be bold?
I'm not sure I understand. Care to put an example ?
@fontface {
font-family: RobotoBold;
src: url(RobotoBold.woff);
font-weight: bold;
}
h2 { font-family: RobotoBold, Helvetica, Comic Sans; font-weight: bold; }
with that there should not be any artificial bolding. Browser will (should)
treat that font as being a bold face.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
That was it, TY! This is what I got from FontSquirrel:
@font-face {
font-family: 'RobotoBold';
src: url('font/Roboto-Bold-webfont.eot');
src: url('font/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('font/Roboto-Bold-webfont.woff') format('woff'),
url('font/Roboto-Bold-webfont.ttf') format('truetype'),
url('font/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
font-weight: normal;
font-style: normal;
}
Needed to change font-weight to bold. Fixed it. Thanks so much Philippe!
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @font-face question
On Thu, May 3, 2012 at 10:54 AM, Philippe Wittenbergh e...@l-c-n.com wrote:
On May 3, 2012, at 10:56 PM, Tom Livingston wrote:
If I'm using RobotoBold - custom font - in my stack on an h2 for
example, I have to spec font-weight: normal; as well because otherwise
it double-bolds the font. But if the user sees a fallback font of
Helvetica or Arial, they won't get it in a bold weight. Is there
anything that can be done about this that I'm not seeing? Can only the
fall backs be bold?
I'm not sure I understand. Care to put an example ?
@fontface {
font-family: RobotoBold;
src: url(RobotoBold.woff);
font-weight: bold;
}
h2 { font-family: RobotoBold, Helvetica, Comic Sans; font-weight: bold; }
with that there should not be any artificial bolding. Browser will (should)
treat that font as being a bold face.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
One other thing. After thinking about this, WHY doesnt this still
double-bold the custom font? Just a function of @font-face?
TIA
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @font-face question
Am 03.05.2012 17:24 schrieb Tom Livingston:
On Thu, May 3, 2012 at 10:54 AM, Philippe Wittenberghe...@l-c-n.com wrote:
On May 3, 2012, at 10:56 PM, Tom Livingston wrote:
If I'm using RobotoBold - custom font - in my stack on anh2 for
example, I have to spec font-weight: normal; as well because otherwise
it double-bolds the font. But if the user sees a fallback font of
Helvetica or Arial, they won't get it in a bold weight. Is there
anything that can be done about this that I'm not seeing? Can only the
fall backs be bold?
I'm not sure I understand. Care to put an example ?
@fontface {
font-family: RobotoBold;
src: url(RobotoBold.woff);
font-weight: bold;
}
h2 { font-family: RobotoBold, Helvetica, Comic Sans; font-weight: bold; }
with that there should not be any artificial bolding. Browser will (should)
treat that font as being a bold face.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
One other thing. After thinking about this, WHY doesnt this still
double-bold the custom font? Just a function of @font-face?
It should not double-bold if your code is ok... can you provide a link
to your page?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @font-face question
On Thu, May 3, 2012 at 11:41 AM, Markus Ernst derer...@gmx.ch wrote:
Am 03.05.2012 17:24 schrieb Tom Livingston:
On Thu, May 3, 2012 at 10:54 AM, Philippe Wittenberghe...@l-c-n.com
wrote:
On May 3, 2012, at 10:56 PM, Tom Livingston wrote:
If I'm using RobotoBold - custom font - in my stack on anh2 for
example, I have to spec font-weight: normal; as well because otherwise
it double-bolds the font. But if the user sees a fallback font of
Helvetica or Arial, they won't get it in a bold weight. Is there
anything that can be done about this that I'm not seeing? Can only the
fall backs be bold?
I'm not sure I understand. Care to put an example ?
@fontface {
font-family: RobotoBold;
src: url(RobotoBold.woff);
font-weight: bold;
}
h2 { font-family: RobotoBold, Helvetica, Comic Sans; font-weight: bold; }
with that there should not be any artificial bolding. Browser will
(should) treat that font as being a bold face.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
One other thing. After thinking about this, WHY doesnt this still
double-bold the custom font? Just a function of @font-face?
It should not double-bold if your code is ok... can you provide a link to
your page?
I was able to solve my problem with Philippe's help.
But I am curious why specing font-weight: bold; in the @font-face
declaration doesn't double-bold a bold face custom font, when specing
font-weight: normal; in the @font-face declaration and font-weight:
bold; on an element DOES double-bold a bold face custom font.
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @font-face question
On Thu, May 3, 2012 at 11:58 AM, Markus Ernst derer...@gmx.ch wrote:
Am 03.05.2012 17:45 schrieb Tom Livingston:
On Thu, May 3, 2012 at 11:41 AM, Markus Ernstderer...@gmx.ch wrote:
Am 03.05.2012 17:24 schrieb Tom Livingston:
On Thu, May 3, 2012 at 10:54 AM, Philippe Wittenberghe...@l-c-n.com
wrote:
On May 3, 2012, at 10:56 PM, Tom Livingston wrote:
If I'm using RobotoBold - custom font - in my stack on anh2 for
example, I have to spec font-weight: normal; as well because otherwise
it double-bolds the font. But if the user sees a fallback font of
Helvetica or Arial, they won't get it in a bold weight. Is there
anything that can be done about this that I'm not seeing? Can only the
fall backs be bold?
I'm not sure I understand. Care to put an example ?
@fontface {
font-family: RobotoBold;
src: url(RobotoBold.woff);
font-weight: bold;
}
h2 { font-family: RobotoBold, Helvetica, Comic Sans; font-weight: bold;
}
with that there should not be any artificial bolding. Browser will
(should) treat that font as being a bold face.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
One other thing. After thinking about this, WHY doesnt this still
double-bold the custom font? Just a function of @font-face?
It should not double-bold if your code is ok... can you provide a link to
your page?
I was able to solve my problem with Philippe's help.
But I am curious why specing font-weight: bold; in the @font-face
declaration doesn't double-bold a bold face custom font, when specing
font-weight: normal; in the @font-face declaration and font-weight:
bold; on an element DOES double-bold a bold face custom font.
Ah, sorry for mis-reading your question. The font-weight property in
@font-face does tell the browser to use this font whenever a bold weight is
required. Thus, it _prevents_ the browser from boldening it. This is
necessary to make web fonts useable just as other fonts - you can combine
them into families:
@fontface {
font-family: MyFont;
src: url(MyFontNormal.woff);
font-weight: normal;
font-style: normal;
}
@fontface {
font-family: MyFont;
src: url(MyFontBold.woff);
font-weight: bold;
font-style: normal;
}
@fontface {
font-family: MyFont;
src: url(MyFontItalic.woff);
font-weight: normal;
font-style: italic;
}
@fontface {
font-family: MyFont;
src: url(MyFontBoldItalic.woff);
font-weight: bold;
font-style: italic;
}
Then you can use font-family:MyFont in your CSS, and apply bold and italic
styles as you would apply them to Arial or Georgia.
Super! Thanks for clearing that one up. So simple... can't see the
forrest for the trees and all that...
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @font-face question
Le May 4, 2012 à 12:24 AM, Tom Livingston a écrit : After thinking about this, WHY doesnt this still double-bold the custom font? Just a function of @font-face? To add to what Markus already explained, an @font-face at-rule consists of a set of _descriptors_: name of the font, where it can be found (src: local() or src: url()), its weight and style, the character range it contains, etc. You basically tell the rendering engine: look, use this face whenever a bold face with normal font-style is needed (in the original example). You can go quite creative with this, e.g use an ultra-light face and declare it to be 'bold', etc. And the additional font-variant and font-feature-settings descriptors open lots of possibilities (but that is still a bit of a future thing). spec is here: http://www.w3.org/TR/css3-fonts/#font-resources If your design requires different styles and weights for a given font-family, then you better make sure to include resources for each one needed, else the UA will start create artificial bolding slanting – this can turn out _really_ ugly. Firefox 11 + with artificial bold at larger font sizes (30px or higher) is plain terrible, I've seen Opera 12 beta doing really awful things with bold + italic on OS X (I hope the fix that bug before release…). -- Philippe Wittenbergh http://l-c-n.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @font-face question
Thank Philippe. I'll have to read through that. With a lot of coffee I'm sure. Sent from iOS 5 On May 3, 2012, at 8:52 PM, Philippe Wittenbergh e...@l-c-n.com wrote: Le May 4, 2012 à 12:24 AM, Tom Livingston a écrit : After thinking about this, WHY doesnt this still double-bold the custom font? Just a function of @font-face? To add to what Markus already explained, an @font-face at-rule consists of a set of _descriptors_: name of the font, where it can be found (src: local() or src: url()), its weight and style, the character range it contains, etc. You basically tell the rendering engine: look, use this face whenever a bold face with normal font-style is needed (in the original example). You can go quite creative with this, e.g use an ultra-light face and declare it to be 'bold', etc. And the additional font-variant and font-feature-settings descriptors open lots of possibilities (but that is still a bit of a future thing). spec is here: http://www.w3.org/TR/css3-fonts/#font-resources If your design requires different styles and weights for a given font-family, then you better make sure to include resources for each one needed, else the UA will start create artificial bolding slanting – this can turn out _really_ ugly. Firefox 11 + with artificial bold at larger font sizes (30px or higher) is plain terrible, I've seen Opera 12 beta doing really awful things with bold + italic on OS X (I hope the fix that bug before release…). -- Philippe Wittenbergh http://l-c-n.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @font-face question
On 9/21/11 12:15 PM, Tom Livingston wrote:
Listers,
General cascade question...
Can I spec my fallback font stack on the body, like:
body{font-family: Arial, Helvetica, sans-serif;}
and then, on ONLY the elements that I wish to use a custom font, spec
JUST the custom font, like:
h1{font-family: 'HelveticaNeueW01-57Cn';}
and have the fallback work properly because of the body font-family
declaration?
Or do I have to spec the whole stack on each element, like:
h1{font-family: 'HelveticaNeueW01-57Cn',Arial,Helmet,Freesans,sans-serif;}
Thanks in advance.
Assuming I understand the question I think you need...
1/ The @font-face declaration.. [something like]
@font-face{font-family:'CallunaRegular';src:url('calluna-regular-webfont.eot');src:url('calluna-regular-webfont.eot?#iefix')
format('embedded-opentype'),url('calluna-regular-webfont.woff')
format('woff'),url('calluna-regular-webfont.ttf')
format('truetype'),url('calluna-regular-webfont.svg#CallunaRegular')
format('svg');font-weight:normal;font-style:normal}
2/ The font and fallbacks you want set for the page proper on the html
or body declaration ... [something like]
body{font: 100%/1.4 'Helvetica Neue',Helvetica,Arial,sans-serif;}
and 3/ The @font-face font /and/ its fallbacks set on the specific
element you want to hit [something like]
h1{font:180% 'CallunaRegular',Palatino,'Palatino
Linotype',Georgia,Times,'Times New
Roman',serif;font-weight:normal;font-style:normal;line-height:normal;}
See http://www.fontsquirrel.com/fontface/generator.
Check the expert box and it will generate most of what you need.
Best,
~d
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @font-face question
On Wed, Sep 21, 2011 at 12:57 PM, David Laakso
da...@chelseacreekstudio.com wrote:
On 9/21/11 12:15 PM, Tom Livingston wrote:
Listers,
General cascade question...
Can I spec my fallback font stack on the body, like:
body{font-family: Arial, Helvetica, sans-serif;}
and then, on ONLY the elements that I wish to use a custom font, spec
JUST the custom font, like:
h1{font-family: 'HelveticaNeueW01-57Cn';}
and have the fallback work properly because of the body font-family
declaration?
Or do I have to spec the whole stack on each element, like:
h1{font-family: 'HelveticaNeueW01-57Cn',Arial,Helmet,Freesans,sans-serif;}
Thanks in advance.
Assuming I understand the question I think you need...
Nope. I know how to make a font stack. I want to know if a custom font
on H1 will fall back to the stack on the body, or do I need the whole
stack - custom and fallbacks - on the H1.
TIA
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @font-face question
On 9/21/11 1:47 PM, David Laakso wrote:
On 9/21/11 1:04 PM, Tom Livingston wrote:
On Wed, Sep 21, 2011 at 12:57 PM, David Laakso
da...@chelseacreekstudio.com wrote:
On 9/21/11 12:15 PM, Tom Livingston wrote:
Listers,
General cascade question...
Can I spec my fallback font stack on the body, like:
body{font-family: Arial, Helvetica, sans-serif;}
and then, on ONLY the elements that I wish to use a custom font, spec
JUST the custom font, like:
h1{font-family: 'HelveticaNeueW01-57Cn';}
and have the fallback work properly because of the body font-family
declaration?
Or do I have to spec the whole stack on each element, like:
h1{font-family:
'HelveticaNeueW01-57Cn',Arial,Helmet,Freesans,sans-serif;}
Thanks in advance.
Assuming I understand the question I think you need...
Nope. I know how to make a font stack. I want to know if a custom font
on H1 will fall back to the stack on the body, or do I need the whole
stack - custom and fallbacks - on the H1.
TIA
I think you need to declare both the custom font /and/ its fallbacks
on H1. For example, if the custom font for h1 is a slab-serif, and the
font and fallbacks declared on the body declaration are sans, in all
likelihood h1 will render a /serif/ in browsers and device browsers
not supporting @font-face [unless perhaps if the user has declared
sans as the default font in her browser preferences, or has a user
style sheet with sans as default.
~d
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @font-face question
On Wed, Sep 21, 2011 at 1:58 PM, David Laakso
da...@chelseacreekstudio.com wrote:
On 9/21/11 1:47 PM, David Laakso wrote:
On 9/21/11 1:04 PM, Tom Livingston wrote:
On Wed, Sep 21, 2011 at 12:57 PM, David Laakso
da...@chelseacreekstudio.com wrote:
On 9/21/11 12:15 PM, Tom Livingston wrote:
Listers,
General cascade question...
Can I spec my fallback font stack on the body, like:
body{font-family: Arial, Helvetica, sans-serif;}
and then, on ONLY the elements that I wish to use a custom font, spec
JUST the custom font, like:
h1{font-family: 'HelveticaNeueW01-57Cn';}
and have the fallback work properly because of the body font-family
declaration?
Or do I have to spec the whole stack on each element, like:
h1{font-family:
'HelveticaNeueW01-57Cn',Arial,Helmet,Freesans,sans-serif;}
Thanks in advance.
Assuming I understand the question I think you need...
Nope. I know how to make a font stack. I want to know if a custom font
on H1 will fall back to the stack on the body, or do I need the whole
stack - custom and fallbacks - on the H1.
TIA
I think you need to declare both the custom font /and/ its fallbacks on
H1. For example, if the custom font for h1 is a slab-serif, and the font and
fallbacks declared on the body declaration are sans, in all likelihood h1
will render a /serif/ in browsers and device browsers not supporting
@font-face [unless perhaps if the user has declared sans as the default font
in her browser preferences, or has a user style sheet with sans as default.
~d
So you're saying it WILL fall back to the body stack.
One would need to be aware of WHAT the fall backs are, but if all
custom fonts are sans-serif, and falling back to Arial - which is
*only* on the body - is acceptable, then it will work.
Thanks David.
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @font-face question
I think you need to declare both the custom font /and/ its fallbacks on H1. For example, if the custom font for h1 is a slab-serif, and the font and fallbacks declared on the body declaration are sans, in all likelihood h1 will render a /serif/ in browsers and device browsers not supporting @font-face [unless perhaps if the user has declared sans as the default font in her browser preferences, or has a user style sheet with sans as default. ~d Actually that's NOT what you are saying, is it! :-0 OK, I re-read that. Full stack it is. Thanks! -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @font-face question
Tom Livingston wrote:
Can I spec my fallback font stack on the body, like:
body{font-family: Arial, Helvetica, sans-serif;}
and then, on ONLY the elements that I wish to use a custom font, spec
JUST the custom font, like:
h1{font-family: 'HelveticaNeueW01-57Cn';}
and have the fallback work properly because of the body font-family
declaration?
Or do I have to spec the whole stack on each element, like:
h1{font-family: 'HelveticaNeueW01-57Cn',Arial,Helmet,Freesans,sans-serif;}
In this case, you need the whole stack, font stacks don't inherit this
way (i.e. if lookup fails for a h1 element, use the font stack of
the containing element).
Depending upon what you want to do, you can handle some fallback like
this using local() within the @font-face src descriptor:
/* use a downloadable font if a local version doesn't exist */
@font-face {
font-family: Headline;
src: local(HelveticaNeueW01-57Cn), url(fonts/HelveticaNeueW01.woff);
}
This doesn't include all the gluck needed to support IE versions
before IE9, but you get the idea.
Cheers,
John Daggett
Mozilla Japan
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @font-face question
Got it. Thanks John.
Sent from my iPhone
On Sep 21, 2011, at 10:43 PM, John Daggett jdagg...@mozilla.com wrote:
Tom Livingston wrote:
Can I spec my fallback font stack on the body, like:
body{font-family: Arial, Helvetica, sans-serif;}
and then, on ONLY the elements that I wish to use a custom font, spec
JUST the custom font, like:
h1{font-family: 'HelveticaNeueW01-57Cn';}
and have the fallback work properly because of the body font-family
declaration?
Or do I have to spec the whole stack on each element, like:
h1{font-family: 'HelveticaNeueW01-57Cn',Arial,Helmet,Freesans,sans-serif;}
In this case, you need the whole stack, font stacks don't inherit this
way (i.e. if lookup fails for a h1 element, use the font stack of
the containing element).
Depending upon what you want to do, you can handle some fallback like
this using local() within the @font-face src descriptor:
/* use a downloadable font if a local version doesn't exist */
@font-face {
font-family: Headline;
src: local(HelveticaNeueW01-57Cn), url(fonts/HelveticaNeueW01.woff);
}
This doesn't include all the gluck needed to support IE versions
before IE9, but you get the idea.
Cheers,
John Daggett
Mozilla Japan
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
