Include Local Files in Browser Extension?
Question
I'm currently developing a browser extension for Chrome and Safari. To be more specific, a tooltip appears when the user hovers over certain keywords. Currently, i'm using @font-face with a link to certain fonts hosted on my website. The problem is - they take a long time to load. Is it possible to include fonts locally in the browser extensions instead of linking to them externally? Can you just package the fonts (or even images?) with the other extension files?
1 answers
solution1
0 2016-03-22 09:44:32
Yes you can, it is quite common. Just make sure you have permissions to distribute all fonts/images that you did not author. Owning a personal license doesn't count.
Every extension is saved locally, whether the code that makes it function requires internet access and server-side scripting or not. A Chrome extension is just a directory saved as a crx archive, which is literally a renamed zip file. The directory, along with the necessary Developer info and metadata, is just like that of any other site, with html , and css , javascript , fonts, images, etc. Obviously if your extension does use server-side scripts, those need to be hosted. I'm sure you know most of this if you are building extensions, but I am elaborating so beginners can follow along.
Generally speaking, fonts are tiny files (rarely over 200k unless they are grunge type, or you are embedding way more characters than necessary) and so if they are self-hosted and taking too long to load, the problem is likely with your host. If I were you, I would use Google Fonts which don't need to be self-hosted and are free.
There are several ways to embed them, no matter which you option you choose. But here is an example of how to link to fonts stored locally within the .crx file, <style> tags go between the <head> tags:
<style>
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url("fonts/OpenSans-Regular-webfont.woff") format("woff");
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url("fonts/OpenSans-Italic-webfont.woff") format("woff");
}
</style>
Obviously, all paths are relative to the html file in your crx directory.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.