Re: [css3-fonts] @font-face font-family names used in other @font-face rules

On Mon, Mar 4, 2013 at 10:15 AM, Adam Prescott <adam@aprescott.com> wrote:
> On 4 March 2013 15:31, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>>
>> Actually, your use case is already handled by the spec - just create multiple @font-face rules with the same name, and the browser will automatically combine them together into a single face. You may already know that this works with weight/style/etc, but it works with unicode-range too.
>
> I tried this using an @import (to try and get some assurances about
> ordering) and it had no effect:
>
>     @import url(http://fonts.googleapis.com/css?family=Wendy+One);
>
>     @font-face {
>       font-family: "Wendy One";
>       unicode-range: U+26;
>     }
>
> I also tried it using the <script> that Google provides but,
> independent of ordering of <style>/<link rel=stylesheet> and <script>,
> the unicode-range was effectively ignored, so everything came out
> using the "Wendy One" value for all characters.
>
> Because I don't control the original @font-face, there's nothing I can
> give for "src", which may be why the @import version fails? Hence the
> problem. Is there something amiss with my attempt, perhaps? (It could
> be a bit confusing to have the same name but wildly different
> characters, but I'd be happy with it just working!)

Yes, a @font-face missing its 'src' descriptor is invalid.

I may have been unclear in describing how to set this up.  Let's say
you have one font living at http://example.com/foo.ttf, and you want
to use it, but override its ampersand with the fancier one in
http://example.com/bar.ttf.  Here's how you do it:

@font-face {
  font-family: "FooWithBarAmpersand";
  src: url("http://example.com/foo.ttf");
}
@font-face {
  font-family: "FooWithBarAmpersand";
  src: url("http://example.com/bar.ttf");
  unicode-range: u+26;
}

Note that you can do this even if you don't control the CSS that sets
up the initial foo.ttf face, as long as you ensure that it appears
first in the CSS document order.  For example, if you're loading a
"Wendy One" font from Google's webfont directory, you can do:

@import url(http://fonts.googleapis.com/css?family=Wendy+One);
@font-face {
  font-family: "Wendy One";
  src: url("fancy-ampersand.ttf");
  unicode-range: u+26;
}

Note, though, that not all browsers actually support unicode-range
yet.  In particular, I think WebKit still ignores it (but I'm not
certain about that).

~TJ

Received on Monday, 4 March 2013 18:53:46 UTC