991419 - On Firefox OS, we shouldn't have to download Fira Sans fonts from the network

Status: RESOLVED FIXED

(Marketplace Graveyard :: General, defect, P2)

Description

[Mathieu Pillard [:mat]]

(Filed in Marketplace->General for now, but might belong somewhere else)

Our @font-face declarations in Marketplace ( https://marketplace.cdn.mozilla.net/media/fireplace/css/include.css?b=1396481346261 ) look like this:

@font-face {
  src: local('Fira Sans OT Light Regular'), local('Fira Sans Light Regular'), local('Fira Sans OT Light'), local('Fira Sans Light'), local('Fira Sans OT'), local('Fira Sans'), url("../fonts/FiraSans/firasansot-light-webfont.woff") format('woff'), url("../fonts/FiraSans/firasansot-light-webfont.ttf") format('truetype'), url("../fonts/FiraSans/firasansot-light-webfont.svg#fira_sans_otlight") format('svg');
  font-family: 'FiraSans';
  font-weight: 300;
}
@font-face {
  src: local('Fira Sans OT Regular'), local('Fira Sans Regular'), local('Fira Sans OT'), local('Fira Sans'), url("../fonts/FiraSans/firasansot-regular-webfont.woff") format('woff'), url("../fonts/FiraSans/firasansot-regular-webfont.ttf") format('truetype'), url("../fonts/FiraSans/firasansot-regular-webfont.svg#fira_sans_otregular") format('svg');
  font-family: 'FiraSans';
  font-weight: 400;
}
@font-face {
  src: local('Fira Sans OT Medium Regular'), local('Fira Sans Medium Regular'), local('Fira Sans OT Medium'), local('Fira Sans Medium'), local('Fira Sans OT'), local('Fira Sans'), url("../fonts/FiraSans/firasansot-medium-webfont.woff") format('woff'), url("../fonts/FiraSans/firasansot-medium-webfont.ttf") format('truetype'), url("../fonts/FiraSans/firasansot-medium-webfont.svg#fira_sans_otregular") format('svg');
  font-family: 'FiraSans';
  font-weight: 500;
}
@font-face {
  src: local('Fira Sans OT Bold'), local('Fira Sans Bold'), local('Fira Sans OT'), local('Fira Sans'), url("../fonts/FiraSans/firasansot-bold-webfont.woff") format('woff'), url("../fonts/FiraSans/firasansot-bold-webfont.ttf") format('truetype'), url("../fonts/FiraSans/firasansot-bold-webfont.svg#fira_sans_otbold") format('svg');
  font-family: 'FiraSans';
  font-weight: 600;
}

Note the src: local() part for each font.

Shouldn't Firefox OS have these already installed and use the local version instead of downloading them ? Loading Marketplace though the app manager w/ Firefox OS 1.3 simulator,
I see network requests for the 4 .woff files:
GET https://marketplace.cdn.mozilla.net/media/fireplace/fonts/FiraSans/firasansot-regular-webfont.woff
GET https://marketplace.cdn.mozilla.net/media/fireplace/fonts/FiraSans/firasansot-bold-webfont.woff
GET https://marketplace.cdn.mozilla.net/media/fireplace/fonts/FiraSans/firasansot-light-webfont.woff
GET https://marketplace.cdn.mozilla.net/media/fireplace/fonts/FiraSans/firasansot-medium-webfont.woff

Is that an error in our font-face declaration ? Or an issue with Firefox OS ? Can we do something about that ? It seems wasteful to download
fonts that should already be present on the device. FWIW, gaia seems to be using "font-family: Fira Sans" directly without using font-face.


/cc Vivien who reminded me to file this bug and might know what's going on.

Comment 1

[Christopher Van Wiemeersch [:cvan]]

I handled this some time ago:

    https://github.com/mozilla/fireplace/commit/ff2be24
    https://github.com/mozilla/fireplace/commit/7010c3#diff-39160bdac1167e9e6a0915ecdfd68f18R75

In Chrome you can do this:

    font-family: "Fira Sans", FiraSans, sans-serif;

And even if you don't have `local` fallbacks provided for the FiraSans web font, Chrome will know to use Fira Sans and not download the FiraSans web fonts.

Firefox has a bug where it actually still downloads the web fonts even if it doesn't need them. Basta and I discovered this Firefox bug last year: bug 881924 (which appears to be a dupe of bug 754215).

The workaround (which is what I implemented in mozilla/fireplace@ff2be24) that works across both Firefox and Chrome is to use a different name for the web font ("FiraSans" without a space) and in the web-font rules, define `src: local('Fira Sans')`. And, that's what I've done.

I have "Fira Sans" installed locally on my desktop, and in both Firefox and Chrome there are no HTTP requests for the "FiraSans" web fonts:

    http://f.cl.ly/items/3P343I1V0k1d1h2T2Q41/Screen%20Shot%202014-04-02%20at%209.06.36%20PM.png

If I remove the "Fira Sans" fonts from my system, I see four HTTP requests for the "FiraSans" web fonts:

    http://f.cl.ly/items/1O3k1v290u3S1Y3r0U3Z/Screen%20Shot%202014-04-02%20at%209.03.40%20PM.png

You can test this by installing the "Fira Sans" fonts on your system - they're available here:

    https://github.com/mozilla-b2g/moztt/tree/master/FiraSans-2.001

I'll let someone else investigate this, but I have the font installed on my desktop, and neither Firefox Desktop nor Chrome downloads the Fira Sans font.

If the web fonts are actually getting downloaded on Firefox OS, then that's a big bug, and damn let's fix it. If something other than what I've explained here is going on, then whoa my jimmies are going to be rustled.

Comment 2

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Jonathan, this sounds like a duplicateof bug 754215 right ?

Comment 3

[Jonathan Kew [:jfkthame]]

I think this is most likely bug 769194 -- src:local simply doesn't work on the gfxFT2Fonts backend. :(

Comment 4

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

(In reply to Jonathan Kew (:jfkthame) from comment #3)
> I think this is most likely bug 769194 -- src:local simply doesn't work on
> the gfxFT2Fonts backend. (In reply to Jonathan Kew (:jfkthame) from comment #3)
> I think this is most likely bug 769194 -- src:local simply doesn't work on
> the gfxFT2Fonts backend. :(

Makes sense. Is there any chance that you can revived the patch in time for 1.5 ? (I'm tempted to resolve this one as DUPLICATE and ask 1.5? on bug 769194).

Comment 5

[John Daggett (:jtd)]

(In reply to Mathieu Pillard [:mat] from comment #0)

> @font-face {
>   src: local('Fira Sans OT Bold'), local('Fira Sans Bold'),
>        local('Fira Sans OT'), local('Fira Sans'),
>        url("../fonts/FiraSans/firasansot-bold-webfont.woff") format('woff'),
>        url("../fonts/FiraSans/firasansot-bold-webfont.ttf") format('truetype'),
>        url("../fonts/FiraSans/firasansot-bold-webfont.svg#fira_sans_otbold") format('svg');
>   font-family: 'FiraSans';
>   font-weight: 600;
> }
> 
> Note the src: local() part for each font.

This is terrible at a number of levels. Fira Sans is available on
Firefox OS using "Fira Sans OT" as the family name. The plan I
understand is to change this to simply "Fira Sans" on FFOS in the
future.  So there's *no* reason to use a downloadable font unless this
is for some earlier version of FFOS that shipped without Fira Sans.

A secondary issue here is that someone simply doesn't understand the
correct usage of local() at all, they appear to be throwing a bunch of
strings in there hoping at random, hoping one will work.  The name
matched should either be the full name (e.g. "Fira Sans Bold") or the
Postscript name (e.g. "FiraSans-Bold"). Using "Fira Sans OT" or "Fira
Sans" is simply wrong, those are the fullnames of the *regular* face,
not the bold face.

So I think the simple solution here is to fix *both* the usage of the
Fira Sans family name along with the @font-face rule definitions:

  @font-face {
    font-family: firasansweb;
    src: local(FiraSans-Bold), local(Fira Sans Bold),
         url(FiraSans-Bold.woff) format("woff"),
         url(FiraSans-Bold.ttf) format("ttf");
    font-weight: bold;
  }

  body {
    font-family: Fira Sans OT, Fira Sans, firasansweb, sans-serif;
  }

Note: fullnames and Postscript names can be viewed using Font Book on OSX. Select a given face (e.g. Fira Sans > Bold and select Preview > Show Font Info.

Comment 6

[Jonathan Kew [:jfkthame]]

(In reply to John Daggett (:jtd) from comment #5)

> So I think the simple solution here is to fix *both* the usage of the
> Fira Sans family name along with the @font-face rule definitions:
> 
>   @font-face {
>     font-family: firasansweb;
>     src: local(FiraSans-Bold), local(Fira Sans Bold),
>          url(FiraSans-Bold.woff) format("woff"),
>          url(FiraSans-Bold.ttf) format("ttf");
>     font-weight: bold;
>   }
> 
>   body {
>     font-family: Fira Sans OT, Fira Sans, firasansweb, sans-serif;
>   }
> 
> Note: fullnames and Postscript names can be viewed using Font Book on OSX.
> Select a given face (e.g. Fira Sans > Bold and select Preview > Show Font
> Info.

However, as things stand with the current code, this form will still (redundantly) download the .woff font, due to bug 754215 (combined with the failure of src:local()). I did have a WiP patch for that at one point, but never quite finished it. Perhaps it's time to take another look.

I'm about to post an updated patch in bug 769194 that should make src:local() work, though, at which point it will become possible to avoid the font downloads here.

Comment 7

[Christopher Van Wiemeersch [:cvan]]

If src:local doesn't work, then providing the system font before the web font in the font-family won't work either because of bug 754215 / bug 881924. Just making sure I'm not misunderstanding?

Comment 8

[Jonathan Kew [:jfkthame]]

(In reply to Christopher Van Wiemeersch [:cvan] from comment #7)
> If src:local doesn't work, then providing the system font before the web
> font in the font-family won't work either because of bug 754215 / bug
> 881924. Just making sure I'm not misunderstanding?

That's correct.

Comment 9

[Jonathan Kew [:jfkthame]]

Now that bug 769194 is fixed, you should be fine here, though it would still be good to clean up the @font-face rules as per comment 5: do NOT use *family* names in src:local(), always use *full* and *postscript* names of specific faces.

Comment 10

[Christopher Van Wiemeersch [:cvan]]

Fixed: https://github.com/mozilla/fireplace/commit/69ad663

(In reply to Jonathan Kew (:jfkthame) from comment #9)
> Now that bug 769194 is fixed, you should be fine here, though it would still
> be good to clean up the @font-face rules as per comment 5: do NOT use
> *family* names in src:local(), always use *full* and *postscript* names of
> specific faces.

Awesome! And thanks, Jonathan, for the tips here - glad someone showed me the right way.

Comment 11

[Iulian Timis]

Please add STR here or mark it with [qa-] if no QA is needed.

Comment 12

[Christopher Van Wiemeersch [:cvan]]

(In reply to Iulian Timis from comment #11)
> Please add STR here or mark it with [qa-] if no QA is needed.

The bug description and comment 0 say what this bug should be addressing.

Comment 13

[Mathieu Pillard [:mat]]

I still see the network downloads with the simulator. I'm downloading a recent FxOS image to flash on a real device to test, but on Tarako, using Inferno package, I saw some warnings in the console that are worrying.

Comment 14

[Mathieu Pillard [:mat]]

Attachment: adb.logcat.inferno.txt

adb logcat showing font-face warnings when using Inferno on Tarako

Comment 15

[Jonathan Kew [:jfkthame]]

Does your Tarako build have bug 769194 fixed? AFAIK that's only on mozilla-central trunk at this point.

Comment 16

[Mathieu Pillard [:mat]]

It most certainly doesn't, but we should work around that in the meantime to avoid useless downloads.

Comment 17

[Christopher Van Wiemeersch [:cvan]]

See discussion here: https://github.com/mozilla/darjeeling/commit/d96439a#commitcomment-6027707

I've tried the workaround but it still happens.

Mat, the warnings are because I removed the physical .woff files in the Inferno .zip package, but turns out Firefox OS is still trying to reference them. Again, on desktop, everything seems fine.

Comment 18

[Christopher Van Wiemeersch [:cvan]]

https://github.com/mozilla/darjeeling/commit/d96439a#commitcomment-6072387

https://github.com/mozilla/fireplace/commit/1f102b7