526949 - [FyFx] Custom @font-face font for scripts other than latin

Status: RESOLVED FIXED

(Webtools Graveyard :: Five Years of Firefox, defect)

Description

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Attachment: Screenshot of the title on zh-TW Windows

Per bug 525857#c14, I propose we add a font other than Folk solid that contains Unicode characters. Typical Unicode font is usually in MBs, but we could create a "subset font" that only contains characters on the titles.

Without the font, the default font is a bit ugly (see attachment) and could not deliver the same experience (and the technology) we want to show across the locale.

Propose steps:
1) Wait for non-Latin locale finish transation the title.
2) Choose an artistically and free-licensed font (I propose Droid Sans).
3) Collect all the titles and their Unicode codepoint.
4) Make the subset font with MS WEFT (.eot) and FontForge (.ttf)
5) Add additional @font-face entry to CSS.
6) Append the name of the font after "Folk solid" in every font-family: properties (So non-Latin chars would fall back to the font but not to the system default).

So far I have difficulties at (4) with FontForge (width information got deleted), however I have no idea whether any other tools available. I haven't tried MS WEFT but it shouldn't be a problem.

For (5) and (6) I can contribute patch(es).

So is the solution acceptable? If not I should drop the whole thing without spending time exploring FontForge...

Comment 1

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Attachment: Patch to fyfx.css to embed Droid Sans (fyfx_ie.css to come)

Just got the subset font working with help of a friend. He handcrafted a script from spec that extract all the characters needed.

The DroidSansFallback-subset.ttf that contains only 10 chars ("五週年！點亮世界社群" in <h1> and <h2>) has only 4644 bytes :)

Tim

Comment 2

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Attachment: Patch to fyfx_ie.css to embed Droid Sans

Comment 3

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Attachment: subset of DroidSansFallback.ttf contains characters from zh-TW, zh-CN, and ja

Contains following characters extracted from messages.po:
五週年！
點亮世界
社群
五岁了
照亮世界
社区
周年
世界を照らそう
コミュニティー

Comment 4

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Attachment: subset of DroidSansFallback.ttf contains characters from zh-TW, zh-CN, and ja

The same subset font, eot format for IE.

I am having problems creating eot file with MS Weft 5.3.2:
* I cannot set Allowed Hosts to "Allow all hosts", so I can only set http://fyfx.mozilla.com/ and http://fyfx.stage.mozilla.com/ to allowed hosts.
(IE will simply ignore the font if the page is not hosted on the site allow to embed the font created)
* This file does not seems to work with IE6 and IE7 (i.e. IE8 only), however  Folksolid.eot does.

Comment 5

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Attachment: Screenshot of the title on zh-TW Windows XP (after applying Driod Sans)

A demonstration after applying Droid Sans.

Comment 6

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Dear Ferro,

Since the site is going to launch on Monday, is it possible to land these changes first?

Tim

Comment 7

[Carlos Ferro]

Tim, the team is currently working on a general font issue but I will make sure they look into this issue and comment here.

Comment 8

[Andres Garcia]

Hi Tim, 
patches and Droid Font implemented (Revision 55436).

I made some changes to the patches since the font-face implementation has changed a bit in the current revision. Please confirm.


thank you!!!!

Comment 9

[Andres Garcia]

hmm.. I reversed the changes because conflicts with other languages occurred. I'm going to verify that and   will go back to you in a bit.

Comment 10

[Andres Garcia]

(In reply to comment #6)
> Dear Ferro,
> 
> Since the site is going to launch on Monday, is it possible to land these
> changes first?
> 
> Tim


Hi Tim, I converted the TTF font to EOT and seems that is working now in both windows/mac (TTF caused some problems on FF Mac).

Please let me know if all works as expected


Andres

Comment 11

[Andres Garcia]

Tim, I noticed that the japanese version:
http://fyfx.stage.mozilla.com/ja/

Has a problem in the "go to SpreadFirefox" link.

As discussed in the Bug 527114 Comment #13, If the word "SpreadFIREFOX" is followed by the phrase "go to", the last one should be removed:

<span></span><span class="spreadfirefox-text">SpreadFirefox</span>

Leaving just the "SpreadFirefox" text.

Comment 12

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Attachment: subset of DroidSansFallback.ttf contains characters from zh-TW, zh-CN, ja, and ko.

Following characters is included: " 5주년커뮤니티세상을 밝혀봐요五週年！點亮世界社群五岁了照亮世界社区周年世界を照らそうコミュニティー"

Please commit and create other formats. Thanks!

Comment 13

[Andres Garcia]

(In reply to comment #12)
> Created an attachment (id=411017) [details]
> subset of DroidSansFallback.ttf contains characters from zh-TW, zh-CN, ja, and
> ko.
> 
> Following characters is included: " 5주년커뮤니티세상을
> 밝혀봐요五週年！點亮世界社群五岁了照亮世界社区周年世界を照らそうコミュニティー"
> 
> Please commit and create other formats. Thanks!

TTF converted to OTF and EOT... please confirm.

thank you.

Comment 14

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Confirmed. Korean (ko) scripts showed up.
I noticed that there are locale-specific layout tweaks in fyfx.js ... mind tweaking ko a bit?

Comment 15

[Andres Garcia]

Hi Tim... Done.
Waiting for confirmation...


thanks!

Comment 16

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Cool! Thanks.

Comment 17

[Staś Małolepszy :stas]

Hey Tim,

Any chance you could make Polish <http://fyfx.stage.mozilla.com/pl/> render as beautifully as Slovak <http://fyfx.stage.mozilla.com/sk/> ? :)

The headlines are:
PIĘĆ LAT FIREFOKSA  
OŚWIEĆ ŚWIAT
SPOŁECZNOŚĆ

Thanks in advance!

Comment 18

[Tim Guan-tin Chien [:timdream] (please needinfo)]

(In reply to comment #17)
> Any chance you could make Polish <http://fyfx.stage.mozilla.com/pl/> render as
> beautifully as Slovak <http://fyfx.stage.mozilla.com/sk/> ? :)

Droid Sans Fallback does not contain these alphabets, I think they would be able to create new glyphs in Folk solid.