Packaging a font with a Google Chrome extension

2019-01-21 09:33发布

站内问答 / 后端开发
346 3 5

I want to use something other than the standard fonts with my Chrome extension. I was excited about the possibility of using the Google Web Fonts, but it seems that could incur a penalty for transferring the web font over the network whenever your extension uses it, to the point of affecting the performance of my extension. Do I have any option for packaging a font with my extension that will work on all Chrome-supported platforms (Windows/Mac/etc.)? Thanks in advance

3条回答
甜甜的少女心
2楼-- · 2019-01-21 09:56

Asking the user for permissions to access Google Web Fonts is far less effort than embedding them (even if this might make perfect sense for eventual off-line scenarios).

manifest.json

"permissions": [
    "http://fonts.googleapis.com/",
    "https://fonts.googleapis.com/"
],
查看更多
0人赞 添加讨论(0) 举报
The star\"
3楼-- · 2019-01-21 10:05

Choose your font. As example I'll take "Stint Ultra Expanded". There is example how to add it to your page:

<link href='http://fonts.googleapis.com/css?family=Stint+Ultra+Expanded' rel='stylesheet' type='text/css'>

Take only the href and open it in browser. You'll see smth like this:

@font-face {
  font-family: 'Stint Ultra Expanded';
  font-style: normal;
  font-weight: 400;
  src: local('Stint Ultra Expanded'), local('StintUltraExpanded-Regular'), url(http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff) format('woff');
}

Take first parameter of url value from src property (http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff).

Download this file.

Use parameter of local value of src property as filename (Stint Ultra Expanded)

Easy way is to download it is using wget:

wget -O "Stint Ultra Expanded.woff" http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff

Now create css file and add content that you have seen before. But you have to change value of src property. Remove all locals and adjust url. It should be smth like this:

@font-face {
  font-family: 'Stint Ultra Expanded';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Stint Ultra Expanded.woff') format('woff');
}

Now add your css file to extension and use the font:

popup.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href='css/fonts.css' rel='stylesheet' type='text/css'>
</head>
<body>

    <span style="font-family: 'Stint Ultra Expanded';">Hello Font</span>

</body>
</html>

If you would like to use this font in content_script you have to adjust url in your css:

@font-face {
  font-family: 'Stint Ultra Expanded';
  font-style: normal;
  font-weight: 400;
  src: url('chrome-extension://__MSG_@@extension_id__/fonts/Stint Ultra Expanded.woff') format('woff');
}

You can add as many @font-face rules in your css as you like.

Notice: local value in src property tells you which name should be used to store it. It is good idea to use this name.

Second notice: If you are using it like google expected, your browser would check if this font is already available local. If this is not the case, then it would be downloaded and stored. So next time it would use font that was previously stored.

As of Chrome 37 (maybe earlier), you need to mention the font as a web accessible resource in the extension's manifest:

"web_accessible_resources": [
  "font/*.woff2"
]

Otherwise you would see an error like:

Denying load of chrome-extension://{ID}/font/My Web Font.woff2. 
Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
查看更多
0人赞 添加讨论(0) 举报
该账号已被封号
4楼-- · 2019-01-21 10:10

This is quite old but for anyone still having issues with this, it is possible to load the font file with javascript. I had trouble getting a font-face declaration to work within shadow dom; all styles would load but chrome would just ignore the font-face declaration completely.

let font = new FontFace("yourFontName", "url('path/to/font/file.woff')");
document.fonts.add(font);

This works beautifully for me. Using font-face is probably preferred but I'm pretty sure my use case is a bug in chrome. Here's the spec for it.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)