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

On Mar 4, 2013 6:53 PM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
>
> 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:
>

This is where we're not talking about the same thing.

In my case, the fancy ampersand I want is the one in Wendy One, served up
by Google Web Fonts. My aim is to override an existing web font (also
served by Web Fonts, but could equally be from another third party) with
the ampersand from another. I have no font file under my control, and there
is no src value I can use here, because I cannot use local() to refer to a
web font defined in another @font-face rule outside of my control.

> @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;
> }

This will work but it's solving a different problem. In my case, I have an
existing web font from Google Web Fonts (which handles the correct format
and syntax for each browser, licensing etc.), and wish to override a single
character from *another* web font, using unicode-range.

> 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).

WebKit does support it, and it works fine when using local("foo") to
override a web font from a third party. But, again, the issue is I have no
src value to use and thus there is no valid @font-face rule I can write.

Perhaps if @font-face rules were valid without src but where there is an
existing font-family with the same name, then my previous example would
work to restrict "Wendy One" to unicode-range: U+26. It would be nice if it
could be given a name more explicit for its purpose, like "Ampersand", but
that would only be possible if there were something like font-family-src,
in this case:

    @import url(http://fonts.googleapis.com/css?family=Wendy+One);

    /* at this point, a @font-face for "Wendy One" exists */

    @font-face {
      font-family-src: "Wendy One";
      font-family: "Ampersand";
      unicode-range: U+26;
    }

Hopefully I've clarified it enough for my original setup to make a bit more
sense.