Closed Bug 992210 Opened 6 years ago Closed 6 years ago

[meta] Unify the fonts used in Firefox OS devices and simulators.

Categories

(Firefox OS Graveyard :: General, defect)

defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: janx, Assigned: janx)

References

Details

Currently, the Firefox OS simulators and B2G Desktop use different fonts than Firefox OS devices. This causes consistency problems, and makes it impossible to test things graphically (e.g. font-related tests are disabled on Gaia's Travis because they run on B2G Desktop and would fail).

On devices, the fonts installed in /system/fonts come from https://github.com/mozilla-b2g/moztt (notably "Fira Sans" and "Fira Mono").

On desktop builds, fonts fall back to the locally available fonts in the system. We should fix this.
Depends on: 992216
Depends on: 993137
(In reply to Tim Guan-tin Chien [:timdream] (MoCo-TPE) (please ni?) from bug 951593 comment 38)
> (In reply to J. Ryan Stinnett [:jryans] from bug 951593 comment 37)
> > * Nearly all of Gaia does not specify an "actual" font family, but instead
> > just uses "sans-serif", etc. and it did not seem like @font-face could
> > replace those system font family definitions
> 
> This is by design. We do not specify font family for i18n reason.
> Gecko gets to decide what the font should use based on document language.

That makes sense, thanks for the explanation. My conclusion is that we can't use @font-face in Gaia to either specify the correct fonts explicitely, nor change what generic font families resolve to.

> That said, if you want to control what maps to generic font names, you
> should simply overwrite Gecko pref ("font.name.*" and "font.name-list.*").
> Just don't mess up the Gecko behavior the rest of the web expects.

This seems like a good solution to me, and it's what we did in bug 925833 for the simulator, and what we're doing in bug 993137 for B2G desktop.

However, there is a problem. Once a generic font like "monospace" is mapped to the expected Firefox OS font "Fira Mono" using the font prefs, the system still needs to have the "Fira Mono" font installed for the text to be displayed properly. Often times, we don't control which fonts are installed on a system that runs the simulator, and if the "Fira" fonts are not installed, our text won't display properly.

We're looking for a way to ship the proper fonts with the simulator. Jonathan, you told us in bug 951593 comment 36 that hacking Gecko's font resolution to add alternative font locations (e.g. a "fonts" folder in a Gaia profile) is not a good idea, and that we should use @font-face instead.

Given that we can't use it in the ways described earlier in this comment, I thought that maybe an @font-face rule could tell Gecko where to find a font like "Fira Mono", so that when another CSS rule specifies "monospace" and Gecko's prefs decide to look for "Fira Mono" on the system, it could find it at the location of the @font-face rule, but those things don't seem to play at the same level. How should we use @font-face to display the proper fonts in the simulator?
Flags: needinfo?(jfkthame)
(In reply to Jan Keromnes [:janx] from comment #0)
> Currently, the Firefox OS simulators and B2G Desktop use different fonts
> than Firefox OS devices. This causes consistency problems, and makes it
> impossible to test things graphically (e.g. font-related tests are disabled
> on Gaia's Travis because they run on B2G Desktop and would fail).

If your purpose is to make perfectly identical screenshots on different platforms, you are out of luck. 
The rendering of the font is not only depend on the font file itself but the display program that actually reads the file, and its config. Take ClearType settings on Windows as an example.

That said, getting the font right can still help consistency, which is great for development.
(In reply to Tim Guan-tin Chien [:timdream] (MoCo-TPE) (please ni?) from comment #2)
> (In reply to Jan Keromnes [:janx] from comment #0)
> > Currently, the Firefox OS simulators and B2G Desktop use different fonts
> > than Firefox OS devices. This causes consistency problems, and makes it
> > impossible to test things graphically (e.g. font-related tests are disabled
> > on Gaia's Travis because they run on B2G Desktop and would fail).
> 
> If your purpose is to make perfectly identical screenshots on different
> platforms, you are out of luck.

I think the goal is to get as close as possible. The font engine might be different, but the font will be the same.
Given that you can't use @font-face to override the CSS generic fonts like 'sans-serif', etc., I think the simplest and best solution is to provide a package of "fonts for the Firefox OS simulator" and let users install these on their local system. Then the simulator itself just needs to customize the font.name.* prefs to make serif, sans-serif and monospace refer to the desired family names.

This requires users to manually install the package of fonts, but I think that's a reasonable expectation for developers who need to run the simulator. You could even add a bit of code to the simulator startup that checks whether the expected fonts are available on the local system, and alerts the user if they're missing.

The precise rendering of the fonts will still be platform-specific (GDI draws very differently from OS X, etc.); even metrics will vary, depending whether the host platform supports sub-pixel glyph positioning, but at least you'll have the same fonts available.
Flags: needinfo?(jfkthame)
(In reply to Jonathan Kew (:jfkthame) from comment #4)
> Given that you can't use @font-face to override the CSS generic fonts like
> 'sans-serif', etc., I think the simplest and best solution is to provide a
> package of "fonts for the Firefox OS simulator" and let users install these
> on their local system. Then the simulator itself just needs to customize the
> font.name.* prefs to make serif, sans-serif and monospace refer to the
> desired family names.

Providing a separate font package to install is indeed a simple solution, however it adds another step for simulator users, and doesn't address all of the use cases: For example, some B2G font comparison tests are deactivated on Travis CI, because it's using a B2G Desktop on Linux. It would be nice to make B2G Desktop use the correct fonts (potentially shipped within the Gaia profile) on environments we have limited control over such as Travis' servers, so that we can enable more font tests there.

> This requires users to manually install the package of fonts, but I think
> that's a reasonable expectation for developers who need to run the
> simulator. You could even add a bit of code to the simulator startup that
> checks whether the expected fonts are available on the local system, and
> alerts the user if they're missing.

Again, that won't work in automated test environments, and I'm not too fond of the added step before a developer can get to a development-ready state. I would really prefer shipping the correct fonts directly with the simulator if at all possible.

> The precise rendering of the fonts will still be platform-specific (GDI
> draws very differently from OS X, etc.); even metrics will vary, depending
> whether the host platform supports sub-pixel glyph positioning, but at least
> you'll have the same fonts available.

That could be an issue for enabling font-comparison tests on other platforms than Gonk. Maybe using the correct fonts in test environments like Travis would not be sufficient to make the font-tests pass there, because the rendered pixels could still be different from the expected baselines.

The original purpose of this bug was to target users of the simulator / b2g desktop *as well as* automated test environments, but in your reply you focus only on the former. Is the latter not useful? I guess we'll need to investigate if it really makes sense to use the correct fonts on test environments where we can't install them.
In an email from John Daggett on the dev-platform mailing list:
> There isn't currently a way to explicitly activate a set of fonts packaged with Firefox.  It sounds like this is what's needed, so that you can assure that the fonts picked up within the simulator match those that are used on the device.  It wouldn't be hard to make this work for the B2G font backend but it would be extra work.  Basically you need code to iterate over a set of fonts in a known location and activate those based on the backend in use (GDI/DirectWrite/OSX/Linux).
> 
> I logged a new bug for this:
> https://bugzilla.mozilla.org/show_bug.cgi?id=998844
> 
> For the simulator, another way would be to have a separate installer for simulator fonts.  This would mean an added step when working with the simulator but it would be simple and effective without requiring Gecko code changes.

However, bug 998844's use cases for a dynamic way to load fonts packages might not seem worth the work/risk of changing platform font code. It looks like we are currently shying away from changing Gecko just for the needs of firefox os developer tools (simulator / b2g desktop / mulet) and tests (automated, look-and-feel, localization), and it would be preferable to find another way to make a simulator load foreign fonts (e.g. asking the user to install them on his system, or only do the platform-font-hack in the mulet).

I'm not sure changing Gecko isn't worth it, and I'll add another argument in favor of it: Bug 948856 is replacing icon sprites with an icon font in firefox os' settings. As indicated in bug 948856 comment 37, using a system font is significantly faster than png/gif/svg sprites (using @font-face however, is not). If icon sprites are indeed replaced with system fonts, the simulator will need a way to load these custom fonts, or icons will be broken. I don't think prompting simulator users to install additional fonts is a good-enough solution.
Depends on: 998844
Depends on: 1011562
Blocks: 1094099
Slightly increased scope: by "simulators", I mean Simulator addons, B2G Dekstop and Mulet.
Summary: [meta] Unify the fonts used in Firefox OS devices, simulators and B2G Desktop → [meta] Unify the fonts used in Firefox OS devices and simulators.
No longer blocks: 1094099
Depends on: 1094099
Depends on: 1103285
Done. \o/
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
Depends on: 1083544
You need to log in before you can comment on or make changes to this bug.