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

Adam Prescott wrote:

> As you all know, the @font-face rule allows a new font-family name
> to be defined, and the src property defines where the font can be
> found. However, there is no way to "chain" @font-face rules
> together, I believe. If there is, I couldn't find it in the current
> CSS Fonts module spec.

>From your later messages I think you meant something slightly
different but this isn't correct as stated.  You can define multiple
faces for the same weight/width/slope combination:

  @font-face {
    font-family: myfont;
    src: url(fontB.ttf);
  }

  @font-face {
    font-family: myfont;
    src: url(fontA.ttf);
  }

When not specified the unicode-range defaults to the full Unicode
range, so myfont will contain glyphs for the characters supported by
fontA.ttf and characters supported by fontB.ttf but not supported by
fontA.ttf.

As described in the description of the unicode-range descriptor,
"multiple @font-face rules with different unicode ranges for the same
family and style descriptor values can be used to create composite
fonts that mix the glyphs from different fonts for different scripts."

In practice this is actually trickier than just mixing together fonts,
the font metrics need to match just as they do when a type designer
puts together a set of faces for a given family.  Just mashing
together random fonts will give you funky results.  And keep in mind
that @font-face rules are part of a *family* so you'll need to make
sure other faces in the families meld in the same way.

> Google Web Fonts (or some other third party) may have provided a
> @font-face rule via a <script> or @import, which would have the effect
> of giving this CSS:
> 
>   @font-face {
>     font-family: FooBar;
>     src: local("Foo Bar"), url("...") format("...");
>   }
> 
> In your own CSS, you may wish to use unicode-range to restrict the
> styling of FooBar to only certain characters (in this case, &):
> 
>   @font-face {
>     font-family: Baz;
>     src: local("FooBar"); /* doesn't work */
>     unicode-range: U+26;
>   }
> 
>   p { font-family: Baz, serif; }

This sounds like you need a feature to workaround a lack of
customizability in the Google Font API.  Like Simon, I think it would
be far simpler to request a feature from the Google Font folks rather
than add additional complexity to @font-face rules.

I also think you're missing a key point about local(), it refers to a
*single* face, not a font family (e.g. "Helvetica", "Helvetica Bold",
"Helvetica Italic", etc.).  Whatever you propose you need to sketch it
out for a font family, not just a single face.

Regards,

John Daggett

Received on Tuesday, 5 March 2013 02:35:26 UTC