- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Mon, 4 Mar 2013 10:52:56 -0800
- To: Adam Prescott <adam@aprescott.com>
- Cc: www-style list <www-style@w3.org>
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