This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 19475 - Italic variants of both webfonts not being loaded
Summary: Italic variants of both webfonts not being loaded
Status: RESOLVED FIXED
Alias: None
Product: webplatform.org
Classification: Unclassified
Component: skin (show other bugs)
Version: unspecified
Hardware: All All
: P2 normal
Target Milestone: ---
Assignee: Lea Verou
QA Contact: public-webplatform-bugs list
URL:
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2012-10-11 14:27 UTC by Scott Cranfill
Modified: 2012-10-11 15:43 UTC (History)
1 user (show)

See Also:


Attachments

Description Scott Cranfill 2012-10-11 14:27:30 UTC
Both webfont families in use on the site, Bitter and Gudea, have true italic variants that are not being loaded. In Safari, the browser simply shows the upright regular style, but Firefox and Chrome fake the italic style by slanting the text, which looks terrible. (IE still not displaying any webfonts, but I'll file a separate bug for that.)

A little poking around in Firebug's Net panel shows that the .woff files are being loaded from these location:

http://docs.webplatform.org/w/skins/webplatform/fonts/gudea-regular-webfont.woff
http://docs.webplatform.org/w/skins/webplatform/fonts/gudea-bold-webfont.woff
http://docs.webplatform.org/w/skins/webplatform/fonts/bitter-regular-webfont.woff
http://docs.webplatform.org/w/skins/webplatform/fonts/bitter-bold-webfont.woff

By simply changing the style in the filename to italic, I was able to download both gudea-italic-webfont.woff and bitter-italic-webfont.woff, so the files are present; it seems they just aren't being correctly called by the CSS.

Firebug's CSS panel shows that only the four regular and bold variants are being called. So, all we need to do is add in the calls for the italic variants:

@font-face {
    font-family: "Gudea";
    font-weight: italic;
    src: url("skins/webplatform/fonts/gudea-italic-webfont.eot?#iefix") format("embedded-opentype"), url("skins/webplatform/fonts/gudea-italic-webfont.woff") format("woff"), url("skins/webplatform/fonts/gudea-italic-webfont.ttf") format("truetype"), url("skins/webplatform/fonts/gudea-italic-webfont.svg#GudeaItalic") format("svg");
}
@font-face {
    font-family: "Bitter";
    font-weight: italic;
    src: url("skins/webplatform/fonts/bitter-italic-webfont.eot?#iefix") format("embedded-opentype"), url("skins/webplatform/fonts/bitter-italic-webfont.woff") format("woff"), url("skins/webplatform/fonts/bitter-italic-webfont.ttf") format("truetype"), url("skins/webplatform/fonts/bitter-italic-webfont.svg#BitterItalic") format("svg");
}

Thanks!
Comment 1 Lea Verou 2012-10-11 15:32:10 UTC
Should be fixed now, will be live once the cache is refreshed. In the meantime, is there a page with italic test that we can use to test?

Thanks.
Comment 2 Scott Cranfill 2012-10-11 15:39:57 UTC
(In reply to comment #1)
> Should be fixed now, will be live once the cache is refreshed. In the
> meantime, is there a page with italic test that we can use to test?
> 
> Thanks.

Awesome! My cache has updated and I see it now.

If you haven't dismissed it, the "Alpha" notice at the top of every page in the wiki is in Bitter Italic. Or, see the note in the yellow box in the middle of this page: http://docs.webplatform.org/wiki/Main_Page

And, you can see Gudea Italic in the citation of Alice in Wonderland at the top of this page: http://docs.webplatform.org/wiki/concepts/internet_and_web/the_history_of_the_web

Appreciate the quick turnaround!
Comment 3 Lea Verou 2012-10-11 15:41:11 UTC
(In reply to comment #2)
> (In reply to comment #1)
> > Should be fixed now, will be live once the cache is refreshed. In the
> > meantime, is there a page with italic test that we can use to test?
> > 
> > Thanks.
> 
> Awesome! My cache has updated and I see it now.
> 
> If you haven't dismissed it, the "Alpha" notice at the top of every page in
> the wiki is in Bitter Italic. Or, see the note in the yellow box in the
> middle of this page: http://docs.webplatform.org/wiki/Main_Page
> 
> And, you can see Gudea Italic in the citation of Alice in Wonderland at the
> top of this page:
> http://docs.webplatform.org/wiki/concepts/internet_and_web/
> the_history_of_the_web
> 
> Appreciate the quick turnaround!

Scott, are you sure you can see it? I was referring to the server-side cache, and AFAIK it wasn't updated (unless someone else updated it for another change).
Comment 4 Scott Cranfill 2012-10-11 15:43:29 UTC
(In reply to comment #3)
> Scott, are you sure you can see it? I was referring to the server-side
> cache, and AFAIK it wasn't updated (unless someone else updated it for
> another change).

Yep, positive! You can tell for certain when you see that the lowercase 'f's now have a descender, or that the lowercase 'a's have changed to single-story 'a's.