Shipping a font with an extension?

[Ziyuan Yao]

I've just developed this interesting extension:
https://sites.google.com/site/yaoziyuan/files/chrome_pie.zip?attredirects=0&d=1

However, it requires a font called Charis SIL from:
http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=CharisSIL_download

I suppose Chrome doesn't have any built-in way for an extension to
install a font, does it?

[Łukasz Łoboda]

You probably can store fonts in your ext and use 

@font-face {
  font-family: "Your italic typeface";
  src: url("type/filename-ital.eot");
  src: local("☺"),
    url("type/filename-ital.woff") format("woff"),
    url("type/filename-ital.otf") format("opentype"),
    url("type/filename-ital.svg#filename-ital") format("svg");
  }

2012/4/22 Ziyuan Yao <yaoz...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "Chromium-extensions" group.
To post to this group, send email to chromium-...@chromium.org.
To unsubscribe from this group, send email to chromium-extens...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-extensions/?hl=en.

[Devin]

...
and you'll want to generate that code with some javascript like this,
probably injected on document_start

var style = document.createElement('style');
style.innerHTML =
'@font-face
{ '+
'  font-family: "Your italic
typeface";
'+
'  src: url("' + chrome.extension.getURL('type/filename-ital.eot') +
' "); '+
'  src:
local("☺"),
'+
'   url("' + chrome.extension.getURL('type/filename-ital.woff') + '
") format("woff"), '+
'    url("' + chrome.extension.getURL('type/filename-ital.otf') + '
") format("opentype"), '+
'    url("' + chrome.extension.getURL('type/filename-
ital.svg#filename-ital') + ' ") format("svg");'+
'}';
document.documentElement.appendChild(style);

On Apr 23, 2:59 am, Łukasz Łoboda <lukasz.w.lob...@gmail.com> wrote:
> You probably can store fonts in your ext and use
>
> @font-face {
>   font-family: "Your italic typeface";
>   src: url("type/filename-ital.eot");
>   src: local("☺"),
>     url("type/filename-ital.woff") format("woff"),
>     url("type/filename-ital.otf") format("opentype"),
>     url("type/filename-ital.svg#filename-ital") format("svg");
>   }
>

> 2012/4/22 Ziyuan Yao <yaoziy...@gmail.com>

>
>
>
>
>
>
>
> > I've just developed this interesting extension:
>

> >https://sites.google.com/site/yaoziyuan/files/chrome_pie.zip?attredir...

>
> > However, it requires a font called Charis SIL from:
>

> >http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=CharisSIL...

>
> > I suppose Chrome doesn't have any built-in way for an extension to
> > install a font, does it?
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Chromium-extensions" group.

> > To post to this group, send email to chromium-extensi...@chromium.org.

> > To unsubscribe from this group, send email to

> > chromium-extensions+unsubscr...@chromium.org.

[Ziyuan Yao]

I can see this is the so-called WebFont usage.

Unfortunately, my extension requires a font like Charis SIL exactly
because it has good support for rendering Unicode combining diacritics
(see this screenshot: https://plus.google.com/102291835965130378165/posts
), and calling Charis SIL via WebFont seems to have rendering
problems.

For example, view this sample HTML file: http://www.bytecool.com/temp/pie.html

It assumes you have Charis SIL installed locally.

If you modifies this HTML to call Charis SIL as a WebFont, you will
see a different result.

On Apr 23, 5:59 pm, Łukasz Łoboda <lukasz.w.lob...@gmail.com> wrote:
> You probably can store fonts in your ext and use
>
> @font-face {
>   font-family: "Your italic typeface";
>   src: url("type/filename-ital.eot");
>   src: local("☺"),
>     url("type/filename-ital.woff") format("woff"),
>     url("type/filename-ital.otf") format("opentype"),
>     url("type/filename-ital.svg#filename-ital") format("svg");
>   }
>

> 2012/4/22 Ziyuan Yao <yaoziy...@gmail.com>

>
>
>
>
>
>
>
> > I've just developed this interesting extension:
>

> >https://sites.google.com/site/yaoziyuan/files/chrome_pie.zip?attredir...

>
> > However, it requires a font called Charis SIL from:
>

> >http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=CharisSIL...

>
> > I suppose Chrome doesn't have any built-in way for an extension to
> > install a font, does it?
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Chromium-extensions" group.

> > To post to this group, send email to chromium-extensi...@chromium.org.

> > To unsubscribe from this group, send email to

> > chromium-extensions+unsubscr...@chromium.org.

[Ziyuan Yao]

Sorry, the screenshot link should be:
https://plus.google.com/102291835965130378165/posts/2NB3J3TY886

> To post to this group, send email to chromium-...@chromium.org.
> To unsubscribe from this group, send email to chromium-extens...@chromium.org.

[Ziyuan Yao]

Lukasz, Devin:

I want to tell you I have succeeded using your method. I will put your
names in my extension's Acknowledgments :-)

[Ziyuan Yao]

Sorry, Chrome seems to have a problem rendering Charis SIL as a Web
font in small sizes. For example, e+ U+0303 (e with a combining tilde
above) can be shown as e with a macron above in certain small sizes.
Calling Charis SIL as a locally installed font doesn't have this
problem.

[Łukasz Łoboda]

could you provide some code? (CSS)

2012/4/26 Ziyuan Yao <yaoz...@gmail.com>

To post to this group, send email to chromium-...@chromium.org.
To unsubscribe from this group, send email to chromium-extens...@chromium.org.

[Ziyuan Yao]

---------- Forwarded message ----------
From: Ziyuan Yao <yaoz...@gmail.com>
Date: Fri, Apr 27, 2012 at 12:31 AM
Subject: Re: [crx] Re: Shipping a font with an extension?
To: Łukasz Łoboda <lukasz....@gmail.com>


Sure:

chrome_pie-AndikaW.zip - unpacked "Chrome PIE" extension using SIL's
Andika font's WOFF version:
https://sites.google.com/site/yaoziyuan/files/chrome_pie-AndikaW.zip?attredirects=0&d=1

chrome_pie-CharisSILW.zip - unpacked "Chrome PIE" extension using
SIL's Charis SIL font's WOFF version:
https://sites.google.com/site/yaoziyuan/files/chrome_pie-CharisSILW.zip?attredirects=0&d=1

Font declaration is in fontscript.js, which is loaded at
document_start as specified by manifest.json.

Th AndikaW version works better, but still has minor rendering issues
compared to locally installed font counterparts.

[Ziyuan Yao]

A little background about this extension:

"Chrome PIE" automatically adds diacritics to English words on a Web
page to indicate their pronunciations (currently I use American
English pronunciation data from CMU Pronouncing Dictionary). This has
three uses:

1. For English-as-a-second-language (ESL) people to learn correct
English word pronunciations.

2. For native English-speaking children to learn how to read. (See "No
Child Left Behind Act".)

3. Recreational use. Show off a sentence in the PIE form to your
online friends or use it in your commercial campaigns.

Refer to page 21 of my free ebook "Breaking the Language Barrier: A
Game-Changing Approach" (
https://sites.google.com/site/yaoziyuan/publications/books/breaking-the-language-barrier-a-game-changing-approach
) for a chart that illustrates which diacritic stands for which sound
or sound group.

On Apr 27, 12:32 am, Ziyuan Yao <yaoziy...@gmail.com> wrote:
> ---------- Forwarded message ----------
> From: Ziyuan Yao <yaoziy...@gmail.com>
> Date: Fri, Apr 27, 2012 at 12:31 AM
> Subject: Re: [crx] Re: Shipping a font with an extension?
> To: Łukasz Łoboda <lukasz.w.lob...@gmail.com>
>
> Sure:
>
> chrome_pie-AndikaW.zip - unpacked "Chrome PIE" extension using SIL's

> Andika font's WOFF version:https://sites.google.com/site/yaoziyuan/files/chrome_pie-AndikaW.zip?...

>
> chrome_pie-CharisSILW.zip - unpacked "Chrome PIE" extension using

> SIL's Charis SIL font's WOFF version:https://sites.google.com/site/yaoziyuan/files/chrome_pie-CharisSILW.z...

>
> Font declaration is in fontscript.js, which is loaded at
> document_start as specified by manifest.json.
>
> Th AndikaW version works better, but still has minor rendering issues
> compared to locally installed font counterparts.
>
> On Thu, Apr 26, 2012 at 11:17 PM, Łukasz Łoboda
> <lukasz.w.lob...@gmail.com> wrote:
> > could you provide some code? (CSS)
>

> > 2012/4/26 Ziyuan Yao <yaoziy...@gmail.com>

[Ziyuan Yao]

Also:

chrome_pie-Andika_local.zip - unpacked "Chrome PIE" extension that
assumes you have installed the "Andika" font locally (the font can be
downloaded from http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=Andika_download#1fd0063a
):
https://sites.google.com/site/yaoziyuan/files/chrome_pie-Andika_local.zip?attredirects=0&d=1

chrome_pie-CharisSIL_local.zip - unpacked "Chrome PIE" extension that
assumes you have installed the "Charis SIL" font locally (the font can
be downloaded from http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=CharisSIL_download#2e2099f0
):
https://sites.google.com/site/yaoziyuan/files/chrome_pie-CharisSIL_local.zip?attredirects=0&d=1

I finally realized that the rendering problems of AndikaW and
CharisSILW are caused by Chrome for Linux. They don't occur in Chrome
for Windows.

On Apr 27, 12:32 am, Ziyuan Yao <yaoziy...@gmail.com> wrote:
> ---------- Forwarded message ----------
> From: Ziyuan Yao <yaoziy...@gmail.com>
> Date: Fri, Apr 27, 2012 at 12:31 AM
> Subject: Re: [crx] Re: Shipping a font with an extension?
> To: Łukasz Łoboda <lukasz.w.lob...@gmail.com>
>
> Sure:
>
> chrome_pie-AndikaW.zip - unpacked "Chrome PIE" extension using SIL's

> Andika font's WOFF version:https://sites.google.com/site/yaoziyuan/files/chrome_pie-AndikaW.zip?...

>
> chrome_pie-CharisSILW.zip - unpacked "Chrome PIE" extension using

> SIL's Charis SIL font's WOFF version:https://sites.google.com/site/yaoziyuan/files/chrome_pie-CharisSILW.z...

>
> Font declaration is in fontscript.js, which is loaded at
> document_start as specified by manifest.json.
>
> Th AndikaW version works better, but still has minor rendering issues
> compared to locally installed font counterparts.
>
> On Thu, Apr 26, 2012 at 11:17 PM, Łukasz Łoboda
> <lukasz.w.lob...@gmail.com> wrote:
> > could you provide some code? (CSS)
>

> > 2012/4/26 Ziyuan Yao <yaoziy...@gmail.com>

[Ziyuan Yao]

To see how Chrome for Linux renders Web fonts incorrectly, here is an
example:

In my Chrome 18 in Fedora 16 64-bit, with chrome_pie-CharisSILW.zip,
googling [ bread ] will return a first result like this (page zoomed
at 125%):
https://sites.google.com/site/yaoziyuan/files/CharisSILW-error.png?attredirects=0&d=1

The tilde (~) above "e" in "Bread" is erroneously rendered as a macron
(-).

However, with chrome_pie-CharisSIL_local.zip, Chrome for Linux can
render it right:
https://sites.google.com/site/yaoziyuan/files/CharisSIL_local-correct.png?attredirects=0&d=1

In Chrome for Windows, both chrome_pie-CharisSILW.zip and chrome_pie-
CharisSIL_local.zip can render it right.

On Apr 27, 1:01 am, Ziyuan Yao <yaoziy...@gmail.com> wrote:
> Also:
>
> chrome_pie-Andika_local.zip - unpacked "Chrome PIE" extension that
> assumes you have installed the "Andika" font locally (the font can be

> downloaded fromhttp://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=Andika_do...
> ):https://sites.google.com/site/yaoziyuan/files/chrome_pie-Andika_local...

>
> chrome_pie-CharisSIL_local.zip - unpacked "Chrome PIE" extension that
> assumes you have installed the "Charis SIL" font locally (the font can

> be downloaded fromhttp://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=CharisSIL...
> ):https://sites.google.com/site/yaoziyuan/files/chrome_pie-CharisSIL_lo...

[Devin]

Well that's lame and stupid - there is no reason being local should
cause any change... maybe fiddle with some un-suspecting parts so
you're using the same format/file extension as your local font file.

Thanks for the acknowledgment!

On Apr 26, 10:15 am, Ziyuan Yao <yaoziy...@gmail.com> wrote:
> To see how Chrome for Linux renders Web fonts incorrectly, here is an
> example:
>
> In my Chrome 18 in Fedora 16 64-bit, with chrome_pie-CharisSILW.zip,
> googling [ bread ] will return a first result like this (page zoomed

> at 125%):https://sites.google.com/site/yaoziyuan/files/CharisSILW-error.png?at...

>
> The tilde (~) above "e" in "Bread" is erroneously rendered as a macron
> (-).
>
> However, with chrome_pie-CharisSIL_local.zip, Chrome for Linux can

> render it right:https://sites.google.com/site/yaoziyuan/files/CharisSIL_local-correct...

[Ziyuan Yao]

No, I tried both the .woff and the .ttf in the @font-face declaration.
They produce the same result.

[Ziyuan Yao]

I'm glad to tell you guys that although CharisSILW has such "bread"
problems, other Latin fonts from SIL such as Andika, Doulos and
Gentium Plus seem to work well as a Web font even in Chrome for Linux.

So I will ship one of these as a Web font within my extension so that
there will be at least one good font to use for all OSes.

And therefore you will be in the Acknowledgments list :-)

On Apr 27, 1:15 am, Ziyuan Yao <yaoziy...@gmail.com> wrote:
> To see how Chrome for Linux renders Web fonts incorrectly, here is an
> example:
>
> In my Chrome 18 in Fedora 16 64-bit, with chrome_pie-CharisSILW.zip,
> googling [ bread ] will return a first result like this (page zoomed

> at 125%):https://sites.google.com/site/yaoziyuan/files/CharisSILW-error.png?at...

>
> The tilde (~) above "e" in "Bread" is erroneously rendered as a macron
> (-).
>
> However, with chrome_pie-CharisSIL_local.zip, Chrome for Linux can

> render it right:https://sites.google.com/site/yaoziyuan/files/CharisSIL_local-correct...

[Ziyuan Yao]

My extension's website has been set up:
https://sites.google.com/site/phoneticallyintuitiveenglish/

And you two are in the Acknowledgments list:
https://sites.google.com/site/phoneticallyintuitiveenglish/about-us

On Apr 26, 7:51 am, Ziyuan Yao <yaoziy...@gmail.com> wrote:

[Devin]

Cool! I feel special :)

I don't have a deep need/use for it, (well, very rarely) but I'll keep
your project in mind as I meet people in the Valley!

[PhistucK]

Did you add the path of the font files to the web_accessible_resources key within manifest.json?

☆PhistucK

On Tue, Oct 9, 2012 at 6:33 PM, Mike Bartlett <mike.b...@gmail.com> wrote:

Hi, did you manage to get this to work.

I keep getting errors like this in my console:

Failed to load resource chrome-extension://inhlkhnblpeoaglplgdlehbdlhlgngeh/StagWeb-Light.woff



I have this in my CSS.

@font-face {

font-family: 'StagWeb-Light';

    src: url('chrome-extension://__MSG_@@extension_id__/StagWeb-Light.eot');

    src: url('chrome-extension://__MSG_@@extension_id__/StagWeb-Light.eot?#iefix') format('embedded-opentype'),

       url('chrome-extension://__MSG_@@extension_id__/StagWeb-Light.woff') format('woff'),

       url('chrome-extension://__MSG_@@extension_id__/StagWeb-Light.ttf') format('truetype'),

       url('chrome-extension://__MSG_@@extension_id__/StagWeb-Light.svg#StagWeb-Light') format('svg');

    font-weight: 300;

    font-style: normal;

    font-stretch: normal;

}

Oddly, in the Resources developer tools, the fonts show up but just reference the same console error.

Mike

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msg/chromium-extensions/-/StVA2UaoeVIJ.

To post to this group, send email to chromium-...@chromium.org.
To unsubscribe from this group, send email to chromium-extens...@chromium.org.

[Cyrus Adkisson]

Been 2 years since you posted this, but it was really helpful to me. Thanks. My solution was similar:

var style = document.createElement('style'); 

var style_str =  "@font-face {";

style_str = style_str + "font-family: \"Silkscreen\";";

style_str = style_str + "src: url(\"type/slkscr.ttf\");";

style_str = style_str + "}";

style.innerHTML = style_str;

document.documentElement.appendChild(style);