Fonts

[RichardLitt]

It's not clear to me what to do with fonts. On the one hand, we don't need anything crazy, pretty much just Font Awesome for now. Eventually we may need different files for things like file formats, possible.

Putting Font Awesome in a script tag inside of the static builder in the extension is trivial, and that works for when you have internet access. However, dealing with Font Awesome when you are offline is not trivial. The css has to load the font files, which need to be stored in a static asset folder. However, the font awesome CSS should ideally be loaded before the Beagle CSS, which is stored in the beagle-style module. This means that fonts need to be exported from beagle-style into the beagle-core build folder. The issue with doing this is I am not sure on the best way to export and import font files as static assets, or how to move them around; hardcoding the path node_modules/beagle-style/fonts/ seems to be to break modularity. A solution for this is to only load fonts in beagle-core, and store them in a static file that is gulped into build/. However, the css then needs to be loaded afterwards.

A separate issue is chrome extensions deal with fonts in a strange way. They can be declared in the manifest, but it's unclear to me if that works for CSS inclusion. Another way is to declare the font paths dynamically using javascript, and inject that into the core itself:

var faVersion = '4.2.0';
var faFontPath = 'fonts';

var styleNode           = document.createElement ("style");
styleNode.type          = "text/css";
styleNode.textContent   = "@font-face { font-family: 'FontAwesome'; src: url('"
  + chrome.extension.getURL (faFontPath + '/fontawesome-webfont.eot?v=' + faVersion)
  + "'); src: url('"
  + chrome.extension.getURL (faFontPath + '/fontawesome-webfont.eot?#iefix&v=' + faVersion)
  + "') format('embedded-opentype'), url('"
  + chrome.extension.getURL(faFontPath + '/fontawesome-webfont.woff?v=' + faVersion) 
  + "') format('woff'), url('"
  + chrome.extension.getURL(faFontPath + '/fontawesome-webfont.ttf?v=' + faVersion) 
  + "') format('truetype'), url('"
  + chrome.extension.getURL(faFontPath + '/fontawesome-webfont.svg?v=' + faVersion + '#fontawesomeregular') 
  + "') format('svg'); font-weight: normal; font-style: normal; }";

exports.fonts = styleNode;

I don't like this, either. This is the current setup on beagle-style branch font-awesome. I am going to shelve this issue for now, as it isn't too relevant; users are warned if they are offline, and fonts don't load anyway. In the future, though, this will be something that needs to be tackled.